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

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 this issue worked ok even on chrome 72+.

deathangel908 · Accepted Answer

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

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

Answers (1)

Related Questions

flexbox with height: 100% doesn&#39;t work on chrome 72+

Answers (1)

Related Questions

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