4

JSFiddle with identical HTML/CSS I'm working with included: http://jsfiddle.net/pf5bczLe/

How do you make .box 100% height of its parent, in this case .box-wrap?

According to this post its flexbox's item imperfection it doesn't act as 100% height for its children. Is there any other way I could achieve all the items to have the same height although their height is dynamic?

Thanks for your time

Community
  • 1
  • 1
MelkorNemesis
  • 3,415
  • 2
  • 20
  • 20

1 Answers1

5

Very close in stretching the child elements. Playing with your example, add the following css to .box-wrap

.box-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

Then add the following to .box

.box {
    -webkit-flex: 1;
    flex: 1;
 }

JSFiddle Link

scniro
  • 16,844
  • 8
  • 62
  • 106