I am facing a challenge trying to make a div resize to match its parent's height using flexbox. This issue seems to occur only in Chrome (48), as it displays correctly in Firefox (44).
You can view the example on Fiddle: https://jsfiddle.net/jvilla/kjtLoxct/1/
The structure is as follows:
...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="page">
<div id="inner"></div>
</div>
<div id="footer"></div>
</div>
...
The goal is to create a layout with flexbox featuring a header and footer, with the main content section between them configured as follows:
#wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#page {
flex-grow: 1;
overflow: auto;
height: 100%;
}
The #page div contains a child div defined with:
#inner {
height: 100%;
}
Despite this setup, the inner div extends beyond the parent boundaries. The parent div appears to have the correct size when inspected (total height - header - footer). However, the inner div does not respect the 100% height rule meant to match its parent's size.
I have explored similar issues but have not found a suitable solution yet. Ideally, I would prefer to avoid using position: absolute if possible.