Verschachtelte flex Behälter mit Überlauf und Ellipsen nicht funktionieren

Question

Ich habe Mühe, text-overflow: ellipsis und overflow: hidden arbeitet so, wie ich es brauche.

Grundsätzlich, ich brauche die linke div mit Klasse item1 und Text erhalten „Bitte gestutzt mich“, wie die Breite des Behälters sinkt schrumpfen, so dass beide item1 und item2 auf der gleichen Reihe sind.

Egal, was ich versuche ich am Ende mit der Zeile nach oben überfüllt und es schrumpft nicht.

versucht, verschiedene Lösungen von hier aber geschafft haben nicht arbeiten, um die Art und Weise zu bekommen was ich brauche.

.mainwrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    max-width: 800px; 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: red; 
 
} 
 

 
.top-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 80%; 
 
    height: 80%; 
 
    background-color: cyan; 
 
} 
 

 
.title { 
 
    background-color: white; 
 
} 
 

 
.table-container { 
 
    display: table; 
 
} 
 

 
.skills-container { 
 
    width: 100%; 
 
    display: block; 
 
    background-color: green; 
 
} 
 

 
.skill-row { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: start; 
 
    background-color: blue; 
 
} 
 

 
.item1 { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.item2 { 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.item-content { 
 
    display: flex; 
 
} 
 

 
.item-details { 
 
    display: flex; 
 
} 
 

 
.text1 { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    background-color: yellow; 
 
} 
 

 
.small-button { 
 
    display: flex; 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: green; 
 
} 
 

 
.overflow-toverflow { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.flex-w { 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-nw { 
 
    flex-wrap: nowrap; 
 
} 
 

 
.flex-min { 
 
    flex: 1 1 auto; 
 
    min-width: 0; 
 
} 
 

 
.flex-sh-0 { 
 
    flex-shrink: 0; 
 
} 
 

 
.min0 { 
 
    min-width: 0; 
 
}

<div class="mainwrapper"> 
 
    <div class="content flex-min"> 
 
    <div class="top-container flex-min"> 
 
     <div class="title">Your skills</div> 
 
     <div class="table-container"> 
 
     <div class="skills-container"> 
 
      <div class="skill-row flex-nw flex-min"> 
 
      <div class="item1 flex-min"> 
 
       <div class="item-content"> 
 
       <div class="small-button"></div> 
 
       <div class="text1 overflow-toverflow">Please truncate me! Please truncate me!Please truncate me!Please truncate me!Please truncate me!Please truncate me</div> 
 
       </div> 
 
      </div> 
 
      <div class="item2 flex-sh-0"> 
 
       <div class="small-button"></div> 
 
       <div class="text1">Relevance: None Whatsoever None</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

codepen: https://codepen.io/Tiartyos/pen/Ljxyqr

Answer 1

Eine anfängliche Einstellung auf flex Artikel ist min-width: auto. Dies bedeutet, dass ein Artikel standardmäßig nicht kleiner als der Inhalt sein kann. Dies verhindert das Rendern der Ellipse, da das Element einfach erweitert wird, um den gesamten Inhalt aufzunehmen.

Die meisten Ihrer flex Produkte haben die notwendige min-width: 0 Überschreibung angewendet. Aber nicht alle von ihnen.

Auch flex und Tabelleneigenschaften spielen nicht gut zusammen. Wenn Sie sie mischen, kann dies zu einem Flex-Layout führen, das in Ihrem Fall zu passieren scheint.

Mit den folgenden Einstellungen, Ihr Layout scheint zu funktionieren.

.table-container { 
    /* display: table; */ 
    min-width: 0; /* NEW */ 
} 

.item-content { 
    display: flex; 
    min-width: 0; /* NEW */ 
} 

revised codepen

Weitere Informationen: (. Dieser Beitrag würde ein Duplikat dieser Verbindung sein, wenn es nicht für die display: table Sache ist)

• Why doesn't flex item shrink past content size?