Chrome中的固定宽度HTML / CSS树在Firefox中不是固定宽度的

Question

我在Chrome中构建了一个树小部件，如下面的代码集中所示。但是：在Firefox中，第二行的溢出未正确隐藏。 ul，li和div.item元素都具有预期的500px宽度，但div.body不会缩小以适合项目。有什么方法可以让它的行为与Chrome相同吗？

铬：

火狐：

Codepen：

http://codepen.io/anon/pen/JYQPGJ?editors=110

HTML：

<div class="tree">
  <ul>
    <li>
      <div class="item">
        <div class="body">
          <div class="first-line">
            <span>Node Type 1</span>
            <span></span>
            <span>Location 1</span>
          </div>
          <div class="second-line">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed augue risus. Quisque et consequat enim. Nullam vitae vulputate metus, eget egestas leo.</p>
          </div>
        </div>
        <div class="button">
          <i class="material-icons">&#xE872;</i>
        </div>
      </div>
      <ul>
        <li>
          <div class="item">
            <div class="indent"></div>
            <div class="body">
              <div class="first-line">
                <span>Node Type 2</span>
                <span>Location 2</span>
              </div>
              <div class="second-line">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada libero id nunc porttitor, ac commodo odio hendrerit. Ut egestas nisi eu odio blandit, vitae lobortis neque congue.</p>
              </div>
            </div>
            <div class="button">
              <i class="material-icons">&#xE872;</i>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS：

.tree {
  width: 500px;
  font-size: 14px;
  font-family: Roboto;
  outline: 1px solid rgba(255,0,0,0.5);
  line-height: 16px;
}

.tree .item {
  display: flex;
  flex-direction: row;
  cursor: pointer;
}
.tree .item:hover {
  background-color: rgba(0,0,0,0.2);
}
.tree .item .indent {
  width: 32px;
  flex-shrink: 0;
}
.tree .item .body {
  flex: 1;
  margin: 8px;
}
.tree .item .button {
  width: 48px;
  flex-shrink: 0;
}
.tree .item .button:hover {
  background-color: rgba(0,0,0,0.2);
}
.tree .item .button i {
  margin: 10px 12px 10px 12px;
}

.tree .item .body .first-line {
  display: flex;
  flex-direction: row;
}
.tree .item .body .first-line span:first-child {
  flex-grow: 1;
}

.tree .item .body .second-line {
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
}