I have a dynamic footer on my page and I expect the content above it to scale to reach the top of the footer, that's fine and all, but I'm having a problem:
#snippet-container { height: 300px; width: 200px; } #page { display: flex; flex-flow: column; height: 100%; } #content { flex: 1 1 auto; background: blue; } #content .test { width: 100%; height: 100%; background: yellow; border: 2px solid red; } #footer { flex: 0 1 10vh; background: black; }
<div id="snippet-container"> <div id="page"> <div id="content"> <div class="test"></div> </div> <div id="footer"></div> </div> </div>
I would expect the .test
element to fill the #content
element, hence the 100%/100% width/height
however it does not.
You can see this reflected as I gave the .test
element a red border in the snippet.
Getting the child of a flex-item to fill height 100%Set position: absolute; on the child. You can then set width/height as required (100% in my sample).
It can be changed by using the flex-direction property. To use flexbox, we have to set display: flex or inline-flex to flex-container. By default, the height and width of a flex-container are set to auto. But we can define a fixed amount to them.
Instead of max-height: 250px you should use flex: 0 0 250px and with flex-direction: column it will set height of element to 250px.
You can use the flex-grow property to force an item to fill the remaining space on the main axis of a flex container. The item will expand as much as possible and occupy the free area.
PROBLEM:
The problem is that your #page
flex container is not reaching the .test
element since .test
is not a child, it is a descendant of the flex item.
The contents of a flex container consists of zero or more flex items: each child of a flex container becomes a flex item.
Each flex item is affected by the flex container, but the flex item's descendants are not.
SOLUTION:
You need to add display: flex
to your #content
as well.
JSFiddle
CODE SNIPPET:
#snippet-container { height: 300px; width: 200px; } #page { display: flex; flex-flow: column; height: 100%; } #content { display: flex; height: 100%; background: blue; } #content .test { width: 100%; background: yellow; border: 2px solid red; } #footer { flex: 0 1 10vh; background: black; }
<div id="snippet-container"> <div id="page"> <div id="content"> <div class="test"></div> </div> <div id="footer"></div> </div> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With