Menu
I'm new to Flexbox and I'm trying to use it to create a layout with a fixed header, fixed footer and a content area that fills up the available space in between the header and footer. The content area is a scrollable area that has 3 panels (divs), each of which has 100% height. For demo purposes, i put the a, b, c (ill refer to them as Panel a, Panel b and Panel c) text on top of each panel.
In Firefox v39, Panel a, b and c are taking the full height of the scrollable container.
In Safari (v 8.0.6 (10600.6.3)), each of the panel's height is a little bit taller than the container. If you scroll to the last Panel (Panel c), the title 'c' doesn't show up anymore when the content is scrolled all the way down. This is not the case with Firefox.
My desired behaviour is the behaviour in Firefox.
Here is the codepen.
<head lang="en">
<meta charset="UTF-8">
<title>Sample</title>
<style>
html, body {
height: 100%;
width: 100%;
font-size: 100%;
margin: 0px;
font-family:open-sans;
font-style: normal;
font-weight: 400;
}
*, *:before, *:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div style="height: 100%; width: 100%; ;display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column;">
<div style="width:100%; min-height: 50px;">
header<br>header<br>header<br>
</div>
<div style="display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column; width:100%; height: 100%; -webkit-flex: 1 1 auto; flex: 1 1 auto; -ms-flex: 1 1 auto; ">
<div style="overflow-y: auto; width:100%; height: 100%; border:red solid thin">
<div style="width:100%; height: 100%; border:green solid thin">
a
</div>
<div style="width:100%; height: 100%; border:green solid thin">
b
</div>
<div style="width:100%; height: 100%; border:green solid thin">
c
</div>
</div>
</div>
<div style=" min-height:30px; border:blue solid thin;">
footer
</div>
</div>
</body>
Thanks.
656
Interpretation of CSS box model here is a bit strange. I'm reluctant to say who is right and who is wrong. But anyways, the trick is to create a wrapper containing a, b, and c, that has position: absolute; top: 0; bottom: 0; width: 100%; and make sure its parent has position: relative;. See codepen
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
