css flex layout fit child into flex box

Question

I want to have a child fill the exactly entire flex box of a flex layout.

If I use the following HTML:

<div class="parent">
    <div class="child1">
        should have 100px height
    </div>
    <div class="child2">
        <div class="intermediatechild2">
            <div class="subchild2">should have 200px height and padding</div>
        </div>
    </div>
</div>

and apply the following css:

.parent {
    display: flex;
    flex-direction : column;
    height: 300px;
    width: 200px;
}

.child1 {
    height: 100px;
    background: #008800;
    flex: 0 0 auto;
}

.child2 {
    height: 100%;
    background: #003300;
    flex: 0 0 auto;
 }

.subchild2 {
    height : 100%;
    background: #ff0000;
 }

.intermediatechild2 {
    padding: 20px;
    height : 100%;
    width : 100%;
    box-sizing: border-box;
    border: 2px solid blue;
 }

I get an overflowing intermediatechild. The height 100% seems to be relative to .parent

A fiddle can be found here:

http://jsfiddle.net/8znFV/4/

Answer 1

I fixed the problem. The solution lies in staying "display:flex". Once you started flex layout, you seem not to be able to step back to "display:block" with "height:100%".

<div class="parent">
    <div class="child1">
        should have 100px height
    </div>
    <div class="child2">
        <div class="intermediatechild2">
            <div class="subchild2">should have 200px height including padding</div>
        </div>
    </div>
</div>

css:

.parent {
    display: flex;
    flex-direction : column;
    height: 300px;
    width: 200px;
}

.child1 {
    height: 100px;
    background: #008800;
}

.child2 {
    background: #003300;
    flex: 1;
    display: flex;
}

.subchild2 {
    background: #ff0000;
    flex: 1;
}

.intermediatechild2 {
    padding: 20px;
    display : flex;
    box-sizing: border-box;
    border: 2px solid blue;
}

working fiddle : http://jsfiddle.net/8znFV/6/

Answer 2

I did not understand exactly what you want, but if what you want is only leave. Subchild2 100% and follow the father's height (intermediatechild2), you'll have to add the father's height (intermediatechild2) with px and remove the height. child2.

Recalling that, you have to count the padding in father's height (intermediatechild2), so if you want. Subchild2 has 200px in height, will have to leave her father (intermediatechild2) with 240px, leaving 20 padding-top and 20 padding-bottom height of more than 200.

A note, only work in chrome as your css code is nonstandard, if you want I can breastfeed him at another time =)

Hope it helps

Here's an example: http://zip.net/bsmZgF

Answer 3

Just Remove height:100% from .child2and it will work. this will give 100% height to child2 element so it's going outside of parent.

It should be auto adjusted that's the purpose of flexbox and 100% height is giving more height(same as parent) to child2.