Equal height children push their sister elements out of parent container

Question

I am trying to place two elements ( .child1 and .child3 ) side-by-side and make them equal height. I am using flex and height:100% for this. However, this pushes the sister elements ( .child2 and .child4 ) out of the parent container. How can I make sure all children stay in their .parent container? Is there a pure CSS solution with no HTML changes?

 .container { display: flex; }.parent { background: blue; padding: 1rem; display: flex; flex-wrap: wrap; }.child1, .child3 { background: red; height: 100%; width: 100%; }.child2, .child4 { background: yellow; width: 100%; height: 50px; }

 <div class="container"> <div class="parent"> <div class="child1">Child 1 should have same height as Child 3</div> <div class="child2">Child 2 pushed out of parent. Has a fixed height.</div> </div> <div class="parent"> <div class="child3">Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. </div> <div class="child4">Child 4 pushed out of parent. Has a fixed height.</div> </div> </div>

Answer 1

Remove flex-wrap: wrap and replace it with flex-direction: column; in your .parent element. Then remove height from .child1 and .child3 .

 .container { display: flex; }.parent { background: blue; padding: 1rem; display: flex; flex-direction: column; }.child1, .child3 { background: red; width: 100%; }.child2, .child4 { background: yellow; height: 50px; }

 <div class="container"> <div class="parent"> <div class="child1">Child 1 should have same height as Child 3</div> <div class="child2">Child 2 pushed out of parent. Has a fixed height.</div> </div> <div class="parent"> <div class="child3">Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. </div> <div class="child4">Child 4 pushed out of parent. Has a fixed height.</div> </div> </div>

EDIT:

if it doesn't serves you then you have to change HTML as well

 .container { display: flex; flex-wrap: wrap; background: blue; padding: 1rem; justify-content: space-between; } div[class^="child"]{ flex: 0 0 Calc(50% - 10px); }.child1, .child3 { background: red; }.child2, .child4 { background: yellow; height: 50px; }.divider { width: 100%; flex: 0 0 100%; }

 <div class="container"> <div class="child1">Child 1 should have same height as Child 3</div> <div class="child3">Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. </div> <div class="divider"></div> <div class="child2">Child 2 pushed out of parent. Has a fixed height.</div> <div class="child4">Child 4 pushed out of parent. Has a fixed height.</div> </div>