How can I implement overflow ellipsis on a text item within flexbox without pushing other items out of their parents?

Question

I have a flexbox setup with 3 boxes. The first box takes up a width of 60px, the last box is set to take up as much space as it needs to prevent text wrapping, and the middle box takes up the remaining space:

.boxes {
  display: flex;
  margin: 0 auto;
  width: 100%;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.2);
}

.box:first-child {
  width: 60px;
  flex: 0 0 60px;
}

.box:nth-child(2) {
  flex: 1;
  width: 100%;
}

.box:last-child {
  flex: 0 0 auto;
}

.box:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.line-item > div {
  display: inline-block;
}

<div class="boxes">
  <div class="box">
    This is box 1
  </div>
  <div class="box">
    This is box 2
    <div class="content">
      <div class="line-item">
        <div>Item one:</div>
        <div>Item value</div>
      </div>
      <div class="line-item">
        <div>Item two:</div>
        <div>A much much much much much much much much much much much much much much much  longer item value</div>
      </div>
      <div class="line-item">
        <div>Item three:</div>
        <div>https://example.com/really-really-really-really-really-really-really-really-really-really-really-really-long-link-test</div>
      </div>
    </div>
  </div>
  <div class="box">
    This is box 3
  </div>
</div>

What I want to do is enforce that line items within box 2 only take up one line and show an ellipsis when the text overflows.

I have tried adding the following to the divs in box #2, but the text in box #3 ends up just getting pushed off the screen and the ellipsis does not show:

.box:nth-child(2) .line-item div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Answer 1

According to this answer, I just needed to add min-width: 0; to each of the flexbox children and then I switched display: inline-block over to use flexbox to keep the items on a single line.

.boxes {
  display: flex;
  margin: 0 auto;
  width: 100%;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.2);
}

.boxes .box {
    min-width: 0;
}

.box:first-child {
  width: 60px;
  flex: 0 0 60px;
}

.box:nth-child(2) {
  flex: 1;
  width: 100%;
}

.box:last-child {
  flex: 0 0 auto;
}

.box:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.box:nth-child(2) .line-item > div:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 5px;
}

.line-item {
  display: flex;
  white-space: nowrap;
}

<div class="boxes">
  <div class="box">
    This is box 1
  </div>
  <div class="box">
    This is box 2
    <div class="content">
      <div class="line-item">
        <div>Item one:</div>
        <div>Item value</div>
      </div>
      <div class="line-item">
        <div>Item two:</div>
        <div>A much much much much much much much much much much much much much much much  longer item value</div>
      </div>
      <div class="line-item">
        <div>Item three:</div>
        <div>https://example.com/really-really-really-really-really-really-really-really-really-really-really-really-long-link-test</div>
      </div>
    </div>
  </div>
  <div class="box">
    This is box 3
  </div>
</div>