4

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;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Arthur Breton
  • 115
  • 2
  • 8

2 Answers2

3

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>
Community
  • 1
  • 1
Arthur Breton
  • 115
  • 2
  • 8
0
.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

Updated Fiddle

Alberto Rubio
  • 404
  • 4
  • 13
  • I think I didn't explain the problem clearly, I want the inside section with the text "How to make this..." to stretch height instead of just the height of the text. If it worked correctly both the "footer" sections would be next to each others. – Arthur Breton May 10 '16 at 05:34