flexbox with height: 100% doesn't work on chrome 72+

Question

Check the snippet bellow.

html, body {
    height: 100%;
    margin: 0;
}


.flex {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.body {
    height: 100%;
}

nav {
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
}

.holder {
    display: flex;
    flex-direction: column;
    height: initial !important;
    flex: 1;
}

.wrapper {

    flex: 1;
    display: flex;
    min-height: 0;
    overflow-y: auto;
}

<div class="body">
    <div class="flex"><!---->
        <nav style="height: 40px; background-color: blue"></nav>
        <!---->
        <div class="holder body">
            <div class="wrapper">
                <div>
                    <div class="holder">

                        <div>
                            <br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br>v
                        </div>
                    </div>


                </div>


            </div>
            <div>
                <div style="height: 60px; background-color: red"></div>
            </div>
        </div>
    </div>
</div>

If you run this on chrome 71-, snippet above doesn't have body scroll, only .wrapper is scrollable. But the same page on chrome 72+ has the body scroll.

EDIT Origin question has also issues with quirks mode. Meaning without <!doctype html> this issue worked ok even on chrome 72+.

you need to declare the HTML5 doctype which is done automatically using snippet here. — Temani Afif, Feb 02 '19 at 10:20
Hm... I want to remove the scroll from the body and move it to `.wrapper`. It seems like I need to **remove** the doctype. Is there anything else I can do to make snippet work with doctype? — deathangel908, Feb 02 '19 at 10:25
wrapper is already having the scroll if you run the snippet full page but on small screen the content is overflowing and you have a body scroll — Temani Afif, Feb 02 '19 at 10:28
looking to it more closely both the snippet and the static page are the same ... if you add doctype you see any difference? this is probably a bug rather than a doctype issue — Temani Afif, Feb 02 '19 at 10:33
This is weird, I'm using chrome 72 on windows and this snippet shows me body scroll. [Here's the proof](https://imgur.com/a/zW5X2sn) — deathangel908, Feb 02 '19 at 10:35
@TemaniAfif I needed to add `min-height` on .`holder` for chrome v72+ (with quirks mode). On lowest version this wasn't required. — deathangel908, Feb 02 '19 at 12:02
ok then, it's this duplicate https://stackoverflow.com/a/36247448/8620333 ... check at the end to see the note about different behavior, it seems changed now in the V72 — Temani Afif, Feb 02 '19 at 12:09
I don't see this as reproducible on latest version of Chrom 73.x, do you? — Parag Bhayani, Apr 09 '19 at 12:18

deathangel908 · Accepted Answer · 2019-02-07T15:43:28.280

On chrome 72+ you need to set min-height on .holder. This is not required on versions before 72.

html, body {
    height: 100%;
    margin: 0;
}


.flex {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.body {
    height: 100%;
}

nav {
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
}

.holder {
    display: flex;
    flex-direction: column;
    height: initial !important;
    flex: 1;
    min-height: 0;
}

.wrapper {

    flex: 1;
    display: flex;
    min-height: 0;
    overflow-y: auto;
}

<div class="body">
    <div class="flex"><!---->
        <nav style="height: 40px; background-color: blue"></nav>
        <!---->
        <div class="holder body">
            <div class="wrapper">
                <div>
                    <div class="holder">

                        <div>
                            <br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br>v
                        </div>
                    </div>


                </div>


            </div>
            <div>
                <div style="height: 60px; background-color: red"></div>
            </div>
        </div>
    </div>
</div>

Do you know if there's any documentation about this Chrome 72 change? Or a Chrome bug? I took a look, and I didn't see this mentioned in the changes to Chrome 72. — Dan Cron, Feb 04 '19 at 20:34
I see this Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=927066 which refers to this discussion https://www.reddit.com/r/webdev/comments/alg8az/anyone_experiencing_issues_with_flexbox_and/ — Dan Cron, Feb 04 '19 at 21:07

flexbox with height: 100% doesn't work on chrome 72+

1 Answers1