<html>
<body>
<div id="main">
<div id="test">
<div style="height: 10000px; background: white; margin: 60px;">
This is inner div
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
#main {
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 60px;
background-color: #fafafa;
}
#test {
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: #f0f0f0;
overflow-y: scroll;
}
When the inner div's height is very large, for example 10000px, the expected result is #main's height keepping no change. Chrome presents the expected layout. But other browsers will increase the height of #test and #main:
Is there something wrong with my code?
(New to flexbox and world change a lot since 2002...)
