Nested Flex Container Not Stretching To The Remaining Space
I am trying to create a simple flexbox layout with nested containers. It works well when I have a single container and use the full width + height. The problem is to have nested co
Solution 1:
Actually the answer already exists on this stackoverflow thread
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).
<div class="flexbox-parent">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow" style="position:relative;">
<div class="flexbox-parent" style="position:absolute;">
<div class="flexbox-item header">
2nd layer header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
<strong>How to make this section use all the remaining space? </strong><br/>
It should also overflow:auto if too much data.
<br/>
</div>
</div>
<div class="flexbox-item footer">
2nd layer Footer
</div>
</div>
</div>
</div>
<div class="flexbox-item footer">
Footer
</div>
</div>
Solution 2:
.flexbox-item {padding: 8px;}
You add some padding in this class. And see this
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
<strong>How to make this section use all the remaining space? </strong><br/>
It should also overflow:auto if too much data.
<br/>
</div>
</div>
The parent has "flexbox-item" class. So it's adding some padd between you "item with text" and your flex container
Post a Comment for "Nested Flex Container Not Stretching To The Remaining Space"