Jak wymusić podział na dwie równe części za flexbox

Question

W strukturze dom jak poniżej:

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

CSS określony jako:

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

div o identyfikatorze 2 i 4 będą równomierne o ile suma szerokości zawartości w id 3 i 5 nie przekracza szerokości domeny o id 1.

Gdy suma przekracza szerokość, nie są one równomiernie rozłożone, a jedna z szerszą zawartością ta Zwiększ szerokość. Jak mogę wymusić 2 i 4, aby zająć nawet szerokość używając Flexbox nawet w takich przypadkach?

Nie chcę używać specyfikacji szerokości przez procent. Chcę trzymać się flexboxa.

Answer 1

Jeśli chcesz elementy rosnąć lub kurczyć niezależnie do jego zawartość, określić zerowy flex basis:

flex-basis: 0; 

Jednak my demo nieprawidłowo działa w Chrome: duży obraz rozciąga to pojemnik rodzic nie ważne, że zera podstawa została ustawiona . Jako obejście, maksymalna szerokość może być ustawiona:

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