使用空白的表格列内的 Flexbox：nowrap

Question

Flexbox 容器内的空白 nowrap 文本溢出了页面。

我似乎在 CSS 布局中遇到了一个奇怪的边缘情况。

我有一个表格，在一列中我有一个包含两列的弹性容器。第一列包含一个选择，第二个文本需要保留在一行中，如果太长则以省略号结尾（文本是动态的）

需要明确的是，我无法控制表格 html。只有在列内，我才能添加 HTML。

弹性盒内的文本溢出似乎是一个常见问题，但其所有正常解决方案在我的情况下都不起作用。我尝试过的：

• 添加最小宽度：0；弹性容器
• 添加弹性收缩：0；带有文本的弹性框
• 添加弹性增长：1；使用 select 来伸缩框
• 许多较小的东西（容器宽度为 100% 等）

这就是我在许多不同的 stackoverflow 文章中找到的所有解决方案，但对我来说，没有任何效果。如果弹性容器位于表格之外，那么一切都可以正常工作，但同样，这对我来说不是一个选择。

这将清楚地表明我的意思：

.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>

我同意该解决方案仅适用于最新的浏览器，或者即使需要特定的浏览器。

Answer 1

您可以通过使用 vw 单元将宽度分配给 .text 来解决此问题。

例如，当我简单地将 width: 50vw; 添加到 .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

默认情况下，表格宽度将根据其内容进行调整。您必须使用 table-layout 更新算法：fixed ; 并添加 width: 100%; 来限制其宽度：

.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.