Overflow with ellipsis ruins flex's children sizes

Question

I'm displaying response in rows, each of the rows is a flex container with 3 children, split by the flex-basis property. I've added a text to the first child in which I wanted to use an ellipsis in case it's too long. However adding the text completely ruins the view by extending the first flex child (each row has different sizes, the second and third children are not directly underneath each other). It looks like the text length has impact on how much the first child will be extended.

Here's what the code looks like (more or less):

.parent-flex {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin: 0 10px;

    .child-1 {
        min-width: 0;
        display: flex;
        flex-direction: column;
        flex-basis: 45%;
    }

    .child-1-text {
        display: flex;
        flex-wrap: nowrap;
    }

    .child-2 {
        min-width: 0;
        flex-basis: 35%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: center;
    }

    .child-3 {
        min-width: 0;
        flex-basis: 20%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: column;
    }
}

.text-with-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

<div class="parent-flex">
    <div class="child-1">
        <div>
            Text <span>Additional text</span>
        </div>
        <div class="text-with-ellipsis">
            <span>Text to be shortened with ellipsis.</span>
        </div>
        <div class="child-1-text">
            <span>X</span>
        </div>
    </div>
    <div class="child-2">
        <div class="child-2-text"></div>
        <div class="child-2-text">
            <span>Some more text</span>
        </div>
    </div>
    <div class="child-3">
        <div>...</div>
        <div>...</div>
    </div>
</div>

I was looking through different cases related to flex and overflow but nothing seemed to work for me. I've tried wrapping the div with the ellipsis with another div, adding min-width: 0 to it, flex-shrink and flex-grow but it didn't help (but maybe I was inserting them into wrong places). When I remove white-space: nowrap from the styles the children ratio is back to normal, but obviously the text isn't wrapped. I can confirm that the wrapped text div width is dependent on the length of the text inside - the longer it is, the bigger the div gets (ignoring it's parent size). Like the clientWidth (or scrollWidth maybe) is calculated based on the text, not on the desired width.

Answer 1

The only solution I have right now is setting the width of the .text-with-ellipsis to a defined size. I used media queries to help it scale up and down for different screen sizes. So something like this:

.text-with-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 500px;
    
    @media (max-width: 1400px) {
        width: 400px;
    }
}

Answer 2

Do this. I used a table instead of divs but you have to add the classes ".first, .second and .third" on your own. The UI is very similar and the third column auto resizes.

THE CODE SNIPET IS BELOW

table {
  --first: 45vw;
  /*width of the first column*/
  --second: 20vw;
  /*width of the second column*/
  --third: clac(abs(100vw - var(--first) - var(--second)));
  /*third column: auto resize*/
  width: 100%;
}

td {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.first {
  width: calc(var(--first) - 16px);
  max-width: calc(var(--first) - 16px);
}

.second {
  width: calc(var(--second) - 16px);
  max-width: calc(var(--second) - 16px);
}

.third {
  width: calc(var(--third) - 16px);
  max-width: calc(var(--third) - 16px);
}

<table border='1'>
  <thead>
    <tr>
      <th class='first'>Title1</th>
      <th class='second'>Title2</th>
      <th class='third'>Title3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='first'>Text Additional text</td>
      <td class='second'>Some more text</td>
      <td class='third'>Dummy text</td>
    </tr>
    <tr>
      <td class='first'>Text to be shortened with ellipsis</td>
      <td class='second'>Nice to meet you</td>
      <td class='third'>See you soon</td>
    </tr>
  </tbody>
</table>

Answer 3

You should add width to the .text-with-ellipsis class. I also changed flex-basis with width and max-width.

.parent-flex {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 10px;

  .child-1 {
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 45%;
    max-width: 45%;
  }

  .child-1-text {
    display: flex;
    flex-wrap: nowrap;
  }

  .child-2 {
    min-width: 0;
    width: 35%;
    max-width: 35%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
  }

  .child-3 {
    min-width: 0;
    width: 20%;
    max-width: 20%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
  }
}

 .child-1 .text-with-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70%;
}

<div class="parent-flex">
    <div class="child-1">
        <div>
            Text <span>Additional text</span>
        </div>
        <div class="text-with-ellipsis">
            <span>Text to be shortened with ellipsis.</span>
        </div>
        <div class="child-1-text">
            <span>X</span>
        </div>
    </div>
    <div class="child-2">
        <div class="child-2-text"></div>
        <div class="child-2-text">
            <span>Some more text</span>
        </div>
    </div>
    <div class="child-3">
        <div>...</div>
        <div>...</div>
    </div>
</div>

Answer 4

You had a couple syntax errors in your CSS which I have fixed below. This fixes the issue with the elements extending beyond the bounds set by flex-basis

.parent-flex {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 10px;
}

.child-1 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex-basis: 45%;
}

.child-1-text {
  display: flex;
  flex-wrap: nowrap;
}

.child-2 {
  min-width: 0;
  flex-basis: 35%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
}

.child-3 {
  min-width: 0;
  flex-basis: 20%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
}

.text-with-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="parent-flex">
  <div class="child-1"></div>
  <div>
    Text <span>Additional text</span>
  </div>
  <div class="text-with-ellipsis">
    <span>Text to be shortened with ellipsis.</span>
  </div>
  <div class="child-1-text">
    <span>X</span>
  </div>
  <div class="child-2">
    <div class="child-2-text"></div>
    <div class="child-2-text">
      <span>Some more text</span>
    </div>
  </div>
  <div class="child-3">
    <div>...</div>
    <div>...</div>
  </div>
</div>