CSS flexbox layout: child with height 100%?

Question

I am trying to use a 'Holy Grail'-style layout with flexbox - fixed header above columns that fill the page. I am basing my code on this source.

My problem is that a child element with height:100% inside of the main cell does not pick up the height of the layout. The following demo shows what I mean, I want the red element to take up the full height (tested in Webkit):

http://jsbin.com/dafac/2/

How can I fix this?

Possible duplicate of http://stackoverflow.com/q/15381172/1807403 — Jonathan Bender, Aug 21 '14 at 21:22

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

I've used the second solution mentioned in How to make flexbox children 100% height of their parent? using "position:absolute; bottom:0;" to create a full height child of the flex item because "height:100%" requires the flex item to have an explicit height.

edited May 23 '17 at 12:14

Community

1
1

answered Jan 19 '15 at 23:30

stealthwang

915
6
8

Thx a lot, I tried editing my jsbin but couldn't see how the solution works? Could you edit the jsbin? – MachineElf Jan 20 '15 at 13:08

CSS flexbox layout: child with height 100%?

1 Answers1

Linked