Flexbox child expands container instead of overflowing

Question

I'm trying to create a layout using flexbox but I'm stumped as to why I can't force a particular section of my UI to overflow with scrollbars. Everything seems to work great until a large child is added which seems to expand everything.

Here's the pen: http://codepen.io/tuckwat/pen/NNWRaB?

Notice that scrollbars appear on the whole page, I want scrollbars to appear on the #view container (dark blue) when a child gets too big.

Here's a pen with the overflow: auto added to #view - http://codepen.io/tuckwat/pen/VawKyp

How can I get this layout to work? I don't want to use absolute positioning on the view because the sidebar or appbar can dynamically resize.

HTML

<div id="body">
  <div id="appbar">appbar</div>
  <div id="main">
    <div id="sidebar">side</div>
    <div id="content">
      <div id="navbar">nav</div>
      <div id="view">
        This view container should scroll
        <div id="view-content">
         This content makes the view grow too large
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#body{
  background: #ccc;
  display:flex;
  flex-direction: column;
  position:absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top:0px;
}

#appbar{
  height:55px;
}

#main{
  display: flex;
  flex:1;
  background: #ddd;
}

#sidebar{
  height:100%;
  background:#660099;
  width:50px;
  flex-shrink:0;
}

#content{
  display:flex;
  flex:1;
  flex-direction:column;
}

#navbar{
  height:20px;
  background:#3cd;
}

#view{
  flex:1;
  background:#126;
  overflow: auto;
}

#view-content{
  width:1500px;
  height:1500px;
  background: #ff6600;
}

For reference, this is what I want it to look like (except I used absolute positioning for the view): http://codepen.io/tuckwat/pen/RawGJL — Tucker, Feb 27 '16 at 03:16
Your code is working.. please add more contents to the `div` `view-content` to see the scroll bar.. — Adarsh Mohan, Feb 27 '16 at 03:25
It looks like it is working in IE (surprisingly) but renders differently in the other browsers. Chrome was my target browser. — Tucker, Feb 27 '16 at 03:42
Possible duplicate of [Rendering problems using flexbox in Firefox and Chrome 48](http://stackoverflow.com/questions/34982834/rendering-problems-using-flexbox-in-firefox-and-chrome-48) — Michael Benjamin, Feb 27 '16 at 12:28

Tucker · Answer 1 · 2016-02-27T12:12:11.257

Another wrinkle... I found a similar blog post that outlines the issue with a solution: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

When applied to my codepen it works great in Chrome and IE but scrollbars don't show up in Firefox. I thought the days of fighting browser quirks were over...

http://codepen.io/tuckwat/pen/qZBrya

#body{
   overflow: hidden;
   ...
}

#content{
   overflow: hidden;
   ...
}

Finally - solution

I was close, but Firefox requires min-height on Flexbox items. Here's a pen that works across IE, Chrome, and Firefox: http://codepen.io/tuckwat/pen/oxNZJW

MaskedTwilight · Answer 2 · 2016-02-27T03:32:33.707

0

This is rather odd.

All three of your codepens are missing "overflow: auto;" for the view class. Adding it adds does exactly what you wanted, as shown in the absolutely positioned codepen.

What browser are you using? (I would do this in a comment, but I don't have enough rep yet.)

edited Feb 27 '16 at 03:32

answered Feb 27 '16 at 03:19

MaskedTwilight

93
1
9

I just tested in latest IE, Chrome, Firefox, and Edge and IE actually worked as described. The three other browsers render it differently (may be because I didn't use prefixes). What browser are you using? – Tucker Feb 27 '16 at 03:39

Flexbox child expands container instead of overflowing

2 Answers2