Stretch child div height to fill parent that has dynamic height

Question

As it can be seen in the following fiddle  I have two divs  contained in a parent div that have stretched to contain the big div  my goal is to make those child divs equal in height   http   fiddle jshell net y9bM4

User · Answer

https   www youtube com watch v jV8B24rSN5o  I think you can use display as grid    parent   display  grid

User · Answer

Add the following CSS   For the parent div   style  display  flex     For child div   style  align-items  stretch

User · Answer

You can do it easily with a bit of jQuery    document  ready function      var parentHeight       parentDiv   parent   height          childDiv   height parentHeight

User · Answer

The solution is to use display  table-cell to bring those elements inline instead of using display  inline-block or float  left    x000D   x000D  div container   x000D    padding  20px  x000D    background   F1F1F1 x000D    x000D   content   x000D    width  150px  x000D    background   ddd  x000D    padding  10px  x000D    display  table-cell  x000D    vertical-align  top  x000D    x000D   text   x000D    font-family  12px Tahoma  Geneva  sans-serif  x000D    color   555  x000D    x000D   lt div id  container  gt  x000D     lt div class  content  gt  x000D       lt h1 gt Title 1 lt  h1 gt  x000D   x000D       lt div class  text  gt Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  x000D         lt br gt Sample Text  Sample Text  Sample Text  x000D         lt br gt Sample Text  x000D         lt br gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  content  gt  x000D       lt h1 gt Title 2 lt  h1 gt  x000D   x000D       lt div class  text  gt Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  Sample Text  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Working Fiddle

User · Answer

Use display  flex to stretch your divs   div container       padding 20px      background  F1F1F1      display  flex      content       width 150px      background  ddd      padding 10px      margin-left  10px      JSFIDDLE

[css] Stretch child div height to fill parent that has dynamic height

Examples related to css

Examples related to html