Wie Teilung in gleiche Teile zwingen FlexBox Verwendung

Question

In einer dom Struktur wie folgt:

<div id="1"> 
    <div id="2"> 
    <div id="3"> 
    </div> 
    </div> 
    <div id="4"> 
    <div id="5"> 
    </div> 
    </div> 
</div> 

mit CSS angegeben als:

#1{ 
    display: flex; 
    flex-direction: row; 
} 
#2, #4{ 
    flex: 1; 
} 

Die divs mit ID 2 und 4 so gleichmäßig verteilt werden solange die Summe der Breite des Inhalts in ID 3 und 5 die Breite des Doms mit ID 1 nicht überschreitet.

Wenn die Summe die Breite überschreitet, sind sie nicht gleichmäßig verteilt, und eine mit breiterem Inhalt wird ta ke mehr Breite. Wie kann ich die 2 und 4 auch in solchen Fällen mit flexbox in die Breite zwingen?

Ich möchte keine Breitenangabe nach Prozent verwenden. Ich möchte bei Flexbox bleiben.

Answer 1

Wenn Sie Elemente unabhängig zu wachsen oder schrumpfen, um es Inhalt ist, geben Sie null flex basis:

flex-basis: 0; 

Allerdings funktioniert my demo falsch in Chrome: großes Bild streckt es übergeordneten Container ist egal, dass die Null Basis gesetzt wurde . Als Abhilfe kann eine maximale Breite eingestellt werden:

img { 
    max-width: 100%; 
    height: auto; 
}