Leerer Nowrap-Text im Flexbox-Container läuft über die Seite hinaus.

Ich scheine im CSS-Layout auf einen seltsamen Randfall zu stoßen.

Ich habe eine Tabelle und in einer Spalte habe ich einen Flexcontainer mit zwei Spalten. Die erste Spalte enthält eine Auswahl, der zweite Text muss in einer Zeile bleiben und mit Auslassungspunkten enden, wenn er zu lang ist (der Text ist dynamisch)

Um es klarzustellen: Ich habe keine Kontrolle über den Tabellen-HTML. Nur innerhalb von Spalten kann ich HTML hinzufügen.

Textüberlauf in der Flexbox scheint ein häufiges Problem zu sein, aber alle normalen Lösungen haben in meinem Fall nicht funktioniert. Was ich versucht habe:

• Mindestbreite hinzufügen: 0; Flex-Container
• Elastisches Schrumpfen hinzufügen: 0; Flexbox mit Text
• Elastisches Wachstum hinzufügen: 1; verwenden Sie „Auswählen“, um das Feld zu erweitern
• Viele kleinere Sachen (Behälterbreite 100% usw.)

Das sind alle Lösungen, die ich in vielen verschiedenen Stackoverflow-Artikeln gefunden habe, aber bei mir hat nichts funktioniert. Wenn sich der Flex-Container außerhalb des Tisches befindet, funktioniert alles einwandfrei, aber auch das ist für mich keine Option.

Damit wird klar, was ich meine:

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

Ich stimme zu, dass diese Lösung nur mit den neuesten Browsern funktioniert oder auch dann, wenn ein bestimmter Browser erforderlich ist.