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>

It is expected. You are telling `.child1` and `.child3` to take whole height of element so there is no space for te rest of elements. That's why it exceeds — ciekals11, Mar 04 '21 at 08:37

ciekals11 · Accepted Answer · 2021-03-04T09:02:56.020

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>

Thank you! The first example did the trick!! I also had to apply flex:1 to child1 and child3, but flex-direction: column; got me into the right direction. Thanks!! — Extect, Mar 04 '21 at 09:04

Equal height children push their sister elements out of parent container

1 Answers1