CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromeflexbox
Jared Scott
Jared Scott

Reputation: 27

Trying to implement flexbox to fill remaining height of webpage, but not functioning in chrome

I have been trying to use flexbox to auto-size certain divs to 'fill' the remaining height on a webpage, but in Chrome (presumably due to the height being set by the flexbox, and not explicitly), I can't control the overflow of the content properly. This is a weird question to try to put into words, so I'll give an example:

<div style="height:250px">   
    <div class="flex-container-vertical" style="height: 100%">
        <div class="header">
            HEADER
        </div>
        <div class="fill-remainder" style="overflow:hidden">
            <div class="flex-container-vertical" style="height: 100%">
                <div class="secondheader">
                  SECOND HEADER
                </div>
                <div class="fill-remainder" style="overflow:auto">
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                </div>
            </div>
        </div>
        <div class="footer">
            FOOTER
        </div>
    </div>    
  </div>

.flex-container-vertical {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.fill-remainder {
    flex: 2;
}

.header {
    background: salmon;
    height:50px;
}

.secondheader {
    background: lavender;
    height: 50px;
}

.footer {
    background: lightblue;
    height: 50px;
}

body {
    overflow: hidden;
    height: 100%;
}

http://codepen.io/anon/pen/JdqJQB

If you open the above codepen in most browsers, the overflow of the "BODYCONTENT" text is scrollable. However, if it is opened in Google Chrome, it is not.

In the following example, the overflow works properly in Chrome, but it is no longer set by flexbox, so the 'fill remaining' height feature I'm trying to implement is eliminated.

<div style="height:250px">   
    <div class="flex-container-vertical" style="height: 100%">
        <div class="header">
            HEADER
        </div>
        <div class="fill-remainder" style="overflow:hidden; height:150px">
            <div class="flex-container-vertical" style="height: 100%">
                <div class="secondheader">
                  SECOND HEADER
                </div>
                <div class="fill-remainder" style="overflow:auto">
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                </div>
            </div>
        </div>
        <div class="footer">
            FOOTER
        </div>
    </div>    
  </div>

.flex-container-vertical {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.fill-remainder {
    flex: 2;
}

.header {
    background: salmon;
    height:50px;
}

.secondheader {
    background: lavender;
    height: 50px;
}

.footer {
    background: lightblue;
    height: 50px;
}

body {
    overflow: hidden;
    height: 100%;
}

http://codepen.io/anon/pen/aOrweK

It's a long story as to why I have to implement things this way, but someone wrote the code before me and certain parts of the actual content are loaded dynamically and won't work properly with a table layout. I should also add that I cannot use position:absolute, because it has weird behavior on mobile and I have been told not to.

Thanks to anyone with suggestions!

Upvotes: 0

Views: 304

Answers (2)

zer00ne
zer00ne

Reputation: 43853

Is this what you want? DEMO

HTML

You require some behavior that flexbox can provide, it's just you must remember 3 flex-container properties that allow it to manipulate it's children properly.

  1. You should always use: justify-content when your flex-direction is row
  2. If flex-direction is column then use align-items
  3. If your'e are going to have more then one row or column, then use align-content

So I applied what was previously mentioned (except the align-content). I didn't need justify-content really but I always use that and align-items together because it's convenient for responsive layouts. The important thing is align-items: stretch which allows all of your flex-children to reach the bottom of the webpage. I also set your most outer div to height: 100vh it was originally 250px I think, so no matter what you'd try, that 250px div would thwart your attempts.

Btw, I changed some class names because they're too long for me to process (lazy brain).

PS, Unless your concerned about Android 4.4 and IE8, the only vendor prefixes you need is a set of -webkit- for Safari.

<div style="height:100vh">   
<div class="flexShell" style="height: 100%">
    <div class="header">
        HEADER
    </div>
    <div class="flexFill" style="overflow:hidden">
        <div class="flexShell" style="height: 100%">
            <div class="secondheader">
              SECOND HEADER
            </div>
            <div class="flexFill" style="overflow:auto">
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
            </div>
        </div>
    </div>
    <div class="footer">
        FOOTER
    </div>
</div>

CSS

 .flexShell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 101%;
}

.flexFill {
  flex: 2;
  height: 101%;
  overflow: auto;
}

.flexOver {
  flex: 2;
  height: 101%;
  overflow: visible;
}

.header {
  background: salmon;
  height: 50px;
}

.secondheader {
  background: lavender;
  height: 50px;
}

.footer {
  background: lightblue;
  height: 50px;
}

body {
  overflow: hidden;
  height: 100%;
}

Upvotes: 0

bumpy
bumpy

Reputation: 2002

Try setting the overflow of fill-remainder to auto.

<div class="fill-remainder" style="overflow:auto">

http://codepen.io/anon/pen/JdqJEr

Upvotes: 2

Related Questions