Maintain Heoght of two columns Divs of unequal content

how to maintain height of two alongside columns divs containing different amount of content using flexbox property

Give the height property to the parent div and set height to 100% for its child elements.

Consider the HTML as shown below:

<div id="parent">
  <div id="child1">
  </div>
  <div id="child2">
  </div> 
</div>

Then the CSS should be:

#parent {
  height: 300px;
}

#child1, #child2 {
  height: 100%;
}

Make sure you read this tutorial too.

1 Like