Fixed-width HTML/CSS tree in Chrome isn't fixed-width in Firefox

Question

I've built myself a tree widget in Chrome, as shown in the codepen below. However: in Firefox, the overflow of the second line is not properly hidden. The ul, li and div.item elements all have the expected 500px width, but the div.body doesn't shrink to fit in the item. Is there some way I can make it behave the same as Chrome?

Chrome:

Firefox:

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;
}