Arthur Breton Arthur Breton - 6 months ago 36
CSS Question

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 container also using a

display: flex
, somehow the nested container does not use all the remaining space (It works only if they have a defined width/height).

screenshot of the problem

jsfiddle view of the problem

<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">
<div class="flexbox-parent">
<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>




html, body
{
width: 100%;
height: 100%;
}

.flexbox-parent
{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}

.flexbox-item {padding: 8px;}
.flexbox-item-grow {
flex: 1; /* same as flex: 1 1 auto; */
}

.flexbox-item.header { background: rgba(255, 0, 0, .1);}
.flexbox-item.footer { background: rgba(0, 255, 0, .1);}
.flexbox-item.content{ background: rgba(0, 0, 255, .1);}

.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.fill-area-content{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;

/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}

Answer

Actually the answer already exists on this stackoverflow thread

Getting the child of a flex-item to fill height 100%

  1. Set position:relative; on the parent of the child.
  2. Set position:absolute; on the child.
  3. You can then set width/height as required (100% in my sample).

Updated fiddle

<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>