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>

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