Come forzare divisione in parti uguali utilizzando FlexBox

Question

In una struttura dom simili:

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

con css specificato come:

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

div con id 2 e 4 saranno distribuiti uniformemente a condizione che la somma della larghezza dei contenuti nell'id 3 e 5 non superi la larghezza della dom con ID 1.

Quando la somma supera la larghezza, non sono distribuiti uniformemente, e uno con contenuto più ampio sarà ta aumenta di larghezza. Come posso forzare il 2 e il 4 a occupare la larghezza uniforme usando la flexbox anche in questi casi?

Non voglio utilizzare la specifica della larghezza in percentuale. Voglio attenermi alla flexbox.

Answer 1

Se si desidera elementi di crescere o ridursi in modo indipendente per il suo contenuto, specifica zero flex basis:

flex-basis: 0; 

Tuttavia, my demo non funziona correttamente in Chrome: grande immagine si estende è contenitore padre non importa che lo zero base è stata impostata . Per risolvere il problema, la larghezza massima può essere impostata:

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