6

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.

pb1111
  • 63
  • 1
  • 1
  • 5

1 Answers1

15

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

initialxy
  • 1,193
  • 8
  • 17
  • This is a good solution, but in my case I needed to have widths of the inner elements define the widths (in this case, it was text in some navigation links. I ended up setting the height of the container and had success. See this answer: http://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent – David Sinclair Jul 29 '16 at 23:54
  • It seems to be a bug in WebKit: https://bugs.webkit.org/show_bug.cgi?id=137730 – benface Oct 03 '16 at 01:01
  • I tried to "stick with flexbox all the way through" mentioned on another page, but it doesn't work for my case. This solution is working for me. (Note: need to add the property of "left: 0" to override parent's left padding) – Brian Ho Jan 27 '20 at 23:25
  • Please follow the discussion here for various methods to fix the issue. position absolute pinning is an option and the one I came up with on my own, but it's not as clean as setting height:0 on the flex-growing container. – Steven Lu Jun 28 '20 at 19:35