Div with 100% height overflowing body in Chrome

Question

I'm trying to make 100% height flex's child as described here and here . In firefox and IE it's shown as expected, but in chrome it's messed up. The divs are getting out of the body. Is it yet another side effect of chrome following the spec to the tee or still a bug?

The code:

<!DOCTYPE html>
<html>
<head>
<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    div {
        border: 1px solid black;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .red-border {
        border: 2px solid red;
    }

    .blue-border {
        border: 2px solid blue;
    }

    .green-border {
        border: 2px solid green;
    }
</style>
</head>
<body class="red-border" >
<div clsas="blue-border" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
    <div  style="flex: 0 1 auto; ">top</content></div>

    <div class="green-border"  style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >
        <div style="flex: 0 1 auto; ">left</div>
        <div style="flex: 1 1 auto; width: 100%; height: 100%;">
            <div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>
        </div>
        <div style="flex: 0 1 auto; ">right</div>
    </div>

    <div style="flex: 0 1 auto; ">bottom</content></div>
</div>
</body>
</html>

plnkr: http://run.plnkr.co/plunks/wi5MQYK5yEdzdgQBaUWh/

that's how it looks in ff and ie (11):

that's how it looks in chome:

UPDATE: The 'center' div should be a non-flex div and still have to have 100% height. The reason is to have non-flex div is that my real site structure is quite complicated - it uses a lot of webcomponents and some of them just can't use flex. So at some point I have to stop using flex and have 'normal' div to have height 100%.

score 8 · Accepted Answer · edited May 23 '17 at 12:30

The problem seems to stem from the fact that you're combining both the height and flex-basis properties in the same declaration block. It appears to create a conflict. In my answer below I've removed the heights and used flex-basis instead. You'll note a couple of other adjustments, as well.

Change:

(1)

<div class="green-border" style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >

TO

<div class="green-border" style="flex: 1 1 100%; display: flex; flex-direction: row; width: 100%;" >

notes: removed height; used flex-basis instead;

(2)

<div style="flex: 1 1 auto; width: 100%; height: 100%;">

TO

<div style="flex: 1 1 100%; width: 100%; display: flex;">

notes: removed height; used flex-basis instead; established nested flex container;

(3)

<div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>

TO

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

notes: removed height; used flex-basis instead; added flex property;

Lastly, the blue border wasn't showing due to a typo.

(4)

clsas="blue-border"

TO

class="blue-border"

With the adjustments above, the layout renders in Chrome like this:

All boxes lie within their containers.

DEMO

Applying 100% height to nested, non-flex elements

In most cases, when using percentage heights on child elements, a percentage height must also be specified for the parent element and all ancestor elements, up to and including the root element.

html, body { height: 100%; }

I have explained the reason for this here:

Working with the CSS height property and percentage values

But a close look at the spec reveals an exception:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Note the part: ... and the element is not absolutely positioned.

Hence, try this on the "center" box:

Change:

(5)

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

TO

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%; position: relative;">
    <div style="border: 5px solid yellow; position: absolute; height: 100%; width: 100%;">
       center</div>
</div>

Notes:

added position: relative to establish nearest positioned ancestor for absolute positioning
created new, nested, non-flex div container
applied absolute positioning to new div with height: 100%.

With absolute positioning you do not need to apply percentage heights to parent containers.

DEMO

But my problem is that I need to get non-flex div to have 100% height. I see that my question isn't clear enough about this. Sorry. The reason is to have non-flex div is that my real site structure is quite complicated - it uses a lot of webcomponents and some of them just can't use flex. So at some point I have to stop using flex and have 'normal' div to have hight 100%. And to get it working I need all parent divs have hight set in % or something. From the second links: " Percentages however are calculated from the specified value of the parent's cross-size property, not it's used value." — user656449, Oct 05 '15 at 13:14
well, yes, I can, but if my parent (flex) div doesn't have height set its childrens heights set in % will be useless. Am I wrong? — user656449, Oct 05 '15 at 13:27
You are not wrong, but there is an exception to that rule. See my revised answer. — Michael Benjamin, Oct 05 '15 at 13:58
yes! sample works pefectly, but still can't get my real app working... looks like those relative/absolut positions break some component. And getting back to the original question: do you think that inability to correctly handle flex div with height is a bug in chrome? Or there is something in spec which prohibits setting height on flex divs? — user656449, Oct 05 '15 at 14:35
Like you wrote in your revision, your site structure is complex. So maybe there's something in there you need to debug. In terms of the behavior between browsers, I'm not sure it's a bug and haven't seen anything about conflicts between heights and `flex-basis`. There may be something in the standard, I just haven't run into it yet. Or it may be yet another difference in interpretation between browsers. I've been seeing a lot of that lately: See [here](http://stackoverflow.com/q/32911324/3597276) and [here](http://stackoverflow.com/q/32885534/3597276). — Michael Benjamin, Oct 05 '15 at 14:41

score -2 · Answer 2 · answered Oct 05 '15 at 10:10

-2

The problem is that your border makes the div larger than 100%, causing it to pop out. Try making your child div smaller than 100%, like 99%. That should resolve your issue.

answered Oct 05 '15 at 10:10

Coding Gal

145
1
12

thank you for suggesting!, I've tried, but it doesn't seem to have any effect - the bottom thing sticks out way beyond border width. And there is box-sizing: border-box;... – user656449 Oct 05 '15 at 10:22
Try 98% or 97%. If that doesn't work, try float:left and display:block. – Coding Gal Oct 05 '15 at 11:21

Div with 100% height overflowing body in Chrome

2 Answers2

Applying 100% height to nested, non-flex elements

Linked