How can I make Flexbox children 100% height of their parent?
If I understand correctly, you want flex-2-child to fill the height and width of its parent, so that the red area is fully covered by the green?
If so, you just need to set flex-2 to use Flexbox:
.flex-2 {
display: flex;
}
Then tell flex-2-child to become flexible:
.flex-2-child {
flex: 1;
}
See http://jsfiddle.net/2ZDuE/10/
The reason is that flex-2-child is not a Flexbox item, but its parent is.
Use align-items: stretch
Similar to David Storey's answer, my workaround is:
.flex-2 {
display: flex;
align-items: stretch;
}
Note that height: 100%
should be removed from the child component (see comments).
Alternatively to align-items
, you can use align-self
just on the .flex-2-child
item you want stretched.
I have answered a similar question here.
I know you have already said position: absolute;
is inconvenient, but it works. See below for further information on fixing the resize issue.
Also see this jsFiddle for a demo, although I have only added WebKit prefixes so open in Chrome.
You basically have two issues which I will deal with separately.
- Getting the child of a flex-item to fill height 100%
- Set
position: relative;
on the parent of the child. - Set
position: absolute;
on the child. - You can then set width/height as required (100% in my sample).
- Fixing the resize scrolling "quirk" in Chrome
- Put
overflow-y: auto;
on the scrollable div. - The scrollable div must have an explicit height specified. My sample already has height 100%, but if none is already applied you can specify
height: 0;
See this answer for more information on the scrolling issue.