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

Question

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?

Answer 1

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>