Css – Nested Flexbox 100% Height Not Working in Safari

cssflexbox

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.

Best Answer

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

Related Topic