Using empty table columns within Flexbox: nowrap

Question

Blank nowrap text inside the Flexbox container is overflowing the page.

I seem to have encountered a strange edge case in CSS layout.

I have a table and in one column I have a flex container with two columns. The first column contains a selection, the second text needs to stay in one line, ending with an ellipsis if too long (the text is dynamic)

To be clear, I have no control over the table html. Only within columns can I add HTML.

Text overflow inside flexbox seems to be a common problem, but all its normal solutions didn't work in my case. What I've tried:

• Add minimum width: 0; flexible container
• Add elastic shrinkage: 0; flexbox with text
• Add elastic growth: 1; use select to expand the box
• Lots of smaller stuff (container width is 100%, etc.)

This is all the solutions I found in many different stackoverflow articles, but for me, nothing worked. If the flex container is outside the table then everything works fine, but again, that's not an option for me.

This will make it clear what I mean:

.container {
    display: flex;
    min-width: 0;
    width: 100%;
    column-gap: 3rem;
}

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

<!-- Works perfectly (just a test)-->
<b>This is what i need:</b>
<div class='container'>
  <div class='child select'>
    <select>
      <option>Option 1 is a long option</option>
      <option>Option 2 is shorter</option>
    </select>
  </div>
  <div class='child text'>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>
<br><br>

<!-- Overflows page (this needs to actually work) -->
<b>This is where it needs to work (inside table):</b>
<table>
  <tbody>
    <tr>
      <th scope="row">
        <label for="select-id">Description field</label>
      </th>
      <td>
        <div class='container'>
          <div class='child select'>
            <select id='select-id'>
              <option>Option 1 is a long option</option>
              <option>Option 2 is shorter</option>
            </select>
          </div>
          <div class='child text'>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

I agree that this solution only works with the latest browsers, or even if a specific browser is required.

Answer 1

You can work around this by assigning the width to .text using a vw unit.

For example, this happens when I simply add width: 50vw; to .text

.container {
    display: flex;
    min-width: 0;
    width: 100%;
    column-gap: 3rem;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50vw;
}

This is what i need:

  

    
      Option 1 is a long option
      Option 2 is shorter
    
  
  

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  






This is where it needs to work (inside table):

Description field	Option 1 is a long option Option 2 is shorter Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Answer 2

By default, the table width will be adjusted according to its content. You have to use table-layout update algorithm: fixed ; and add width: 100%; to limit its width:

.container {
  display: flex;
  min-width: 0;
  width: 100%;
  column-gap: 3rem;
}

table {
  table-layout: fixed;
  width: 100%;
}

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

This is what i need:

  

    
      Option 1 is a long option
      Option 2 is shorter
    
  
  

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  






This is where it needs to work (inside table):

Description field	Option 1 is a long option Option 2 is shorter Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.