Utilisation de colonnes de table vides dans Flexbox : nowrap

Question

Le texte vierge à l'intérieur du conteneur Flexbox déborde de la page.

Il semble que je me heurte à un cas étrange dans la mise en page CSS.

J'ai une table et dans une colonne j'ai un conteneur flexible avec deux colonnes. La première colonne contient une sélection, le deuxième texte doit rester sur une seule ligne et se terminer par des points de suspension s'il est trop long (le texte est dynamique)

Pour être clair, je n'ai aucun contrôle sur le tableau html. Ce n'est que dans les colonnes que je peux ajouter du HTML.

Le débordement de texte à l'intérieur de flexbox semble être un problème courant mais toutes ses solutions normales n'ont pas fonctionné dans mon cas. Ce que j'ai essayé :

• Ajouter une largeur minimale : 0 ;
Ajouter un rétrécissement élastique : 0 ; flexbox avec texte
Ajouter une croissance élastique : 1 ; utilisez select pour agrandir la boîte
Beaucoup de petits trucs (largeur du conteneur 100%, etc.)

Ce sont toutes les solutions que j'ai trouvées dans de nombreux articles différents sur Stackoverflow, mais pour moi, rien n'a fonctionné. Si le conteneur flexible est en dehors de la table, tout fonctionne bien, mais encore une fois, ce n'est pas une option pour moi.

Cela clarifiera ce que je veux dire :

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

Je reconnais que cette solution ne fonctionne qu'avec les derniers navigateurs, ou même si un navigateur spécifique est requis.

Answer 1

Vous pouvez résoudre ce problème en utilisant vw 单元将宽度分配给 .text.

Par exemple, cela se produit lorsque je remplace simplement width: 50vw; 添加到 .text par

.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

Par défaut, la largeur du tableau s'ajustera en fonction de son contenu. Il faut utiliser table-layout 更新算法：fixed ; 并添加 width: 100%; pour limiter sa largeur :

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