Flexbox column container inside another flex container doesn't get 100% height in Chrome, but in Firefox and Edge all ok.
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
}
You're missing a height: 100% on a parent element: <header>
Once you add that in, the layout works in Chrome, as well.
header {
min-height: 100%;
width: 100%;
height: 100%; /* NEW */
}
When using percentage heights, Chrome requires that each parent element have a defined height. More details here:
When using percentage heights in flexbox, there are rendering differences among the major browsers. More details here:
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments