CSS - Comment forcer la deuxième div à une autre ligne quand la première div déborde

Question

J'ai deux divs placés côte à côte de largeur égale. Lorsque le texte de la première div déborde sur une deuxième ligne, je voudrais que la seconde div soit placée en dessous de la première divisant la largeur de chaque div. Est-ce possible en CSS?

J'ai essayé d'utiliser des flexbox mais je ne sais pas où aller d'ici.

#container { 
 
    display: flex; 
 
    width: 500px; 
 
    border: 1px solid black; 
 
} 
 

 
.cell { 
 
    flex: 1; 
 
}

<div id="container"> 
 
    <div class="cell" style="background-color:pink;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit 
 
    </div> 
 
    <div class="cell" style="background-color:lightblue;"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
    </div> 
 
</div>

Answer 1

I figured it out. Les deux divs doivent être min-width: 50% et la dernière div doit être flex: 1. La div parente doit avoir flex-wrap: wrap.

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 500px; 
 
    border: 1px solid black; 
 
} 
 
#cell1 { 
 
    background-color: pink; 
 
    min-width: 50%; 
 
} 
 
#cell2 { 
 
    background-color: lightblue; 
 
    min-width: 50%; 
 
    flex: 1; 
 
}

<div id="container"> 
 
    <div id="cell1"> 
 
     Lorem ipsum dods Ut eniasdfasdf 
 
    </div> 
 
    <div id="cell2"> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
    </div> 
 
</div>

Answer 2

Vous pouvez activer flex-wrap: wrap; sur le récipient et flex-grow: 1; sur les articles. (Vue extrait en plein écran et d'ajuster la largeur du navigateur)

#container { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    flex-wrap: wrap; 
 
} 
 

 
.cell { 
 
    flex-grow:1; 
 
}

<div id="container"> 
 
    <div class="cell" style="background-color:pink;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit 
 
    </div> 
 
    <div class="cell" style="background-color:lightblue;"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
    </div> 
 
</div>