Overflow: auto causes vertically centered items to be cut off using Flexbox

6
votes

The first link is flexbox 2009 model:

http://jsfiddle.net/vLKBV/

<div style="display:-webkit-box;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

and the second one is the revised 2011 - 2012 version:

http://jsfiddle.net/MNRgT/1/

<div style="display:-webkit-flex;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;background:#0f0;-webkit-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

If you resize the result vertically you will see that "HELLO" dissapears in the newer flex model, and if you scroll down, it gives you a bottom white space. On the other hand the older flex model behaves correctly.

Is there any way around this in newest Chrome v26.0.1410.65?

1
google-chromewebkitflexbox
I can't seem to reproduce. Both fiddles look identical to me (Chrome v26.0.1410.64). Also, the CSS would be a lot easier to read if it wasn't inline. – cimmanon
Yes, I've checked with the latest canary build of Chrome, and both are identical. Per spec they shouldn't be different either, except some minor details and the implementation being less buggy. If there are any differences between the two, the latter is most likely correct per spec. – David Storey
So if you make the "Result" viewport really small, you can still see the label "HELLO" by scrolling up or down? This applies to the newer model. – denicio
When the viewport is really small, "HELLO" is only visible when I scroll horizontally. I don't have the option to scroll vertically. – cimmanon
What I ment was make the viewport small by dragging the top bar of jsfiddle, not resize your browser in width. Thanks for trying by the way, I am almost definite it's a substantial difference between the two models. – denicio

1 Answers

9
votes

Unfortunately, the difference between the 2009 and 2012 specifications involves more than just different property names. Implementing incomplete drafts is always a gamble, so its always safer to assume that browsers following the newer spec are the ones with the correct behavior (even if it isn't the behavior you want).

The beauty of Flexbox is that it offers a lot of different ways to achieve a particular layout. One of the underplayed features of Flexbox is that the value of auto for top and bottom margins really does what it sounds like, and its just what you need here in place of justify-contents/align-items.

http://codepen.io/cimmanon/pen/DEnHh

html, body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
}

div.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%;
}

div.side {
  background: #F00;
  width: 50px;
}

div.center {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-Y: scroll;
  background: #0f0;
}

div.child {
  margin: auto;
  background: white;
  width: 10em;
}

<div class="container">
  <div class="side"></div>
  <div class="center">
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.
    </div>
  </div>
  <div class="side"></div>
</div>