Warum ist das Flex-Layout von seinem Überlaufinhalt betroffen?

Question

Wie Sie sehen können, bricht eine Flexbox nicht in zwei Teile, sondern zeigt nur den blauen Teil an. Wenn Sie die overflow: hidden auskommentieren funktioniert es wie beabsichtigt. Warum?

Der .nav Inhalt ist über die Breite.

.cont { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: red; 
 
    display: flex; 
 
} 
 
.aside { 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 
.nav { 
 
    /*overflow: hidden;*/ 
 
    flex: 1; 
 
    background-color: blue; 
 
} 
 
.info { 
 
    max-width: 70%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    word-wrap: normal; 
 
} 
 
.name {}

<div class="cont"> 
 
    <div class="aside"></div> 
 
    <div class="nav"> 
 
    <div class="info"> 
 
     <span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Da eine Anfangseinstellung eines flexiblen Behälters flex-shrink: 1 ist. Dies bedeutet, dass Flex-Elemente schrumpfen dürfen und dies auch, um ein Überlaufen des Containers zu verhindern.

Ihr Element .aside hat keinen Inhalt, daher verkleinert der Algorithmus die Breite auf 0, um dem Geschwister mehr Platz zu geben und sicherzustellen, dass nichts den Container überläuft.

Sie können diese Einstellung mit flex-shrink: 0 überschreiben (dh, die Schrumpffunktion ist deaktiviert).

.cont { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: red; 
 
    display: flex; 
 
} 
 

 
.aside { 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: green; 
 
    flex-shrink: 0;   /* new */ 
 
} 
 

 
.nav { 
 
    overflow: hidden; 
 
    flex: 1; 
 
    background-color: aqua; /* adjusted color for readability */ 
 
} 
 

 
.info { 
 
    max-width: 70%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    word-wrap: normal; 
 
}

<div class="cont"> 
 
    <div class="aside"></div> 
 
    <div class="nav"> 
 
     <div class="info"> 
 
      <span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span> 
 
     </div> 
 
    </div> 
 
</div>