google-chrome - 溢出：使用 Flexbox 自动导致垂直居中的项目被切断

Question

第一个链接是 flexbox 2009 模型：

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>

第二个是修订后的 2011 - 2012 版本：

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>

如果您垂直调整结果大小，您将看到“HELLO”在较新的 flex 模型中消失，如果您向下滚动，它会给您一个底部空白区域。另一方面，较旧的 flex 模型表现正确。

最新的 Chrome v26.0.1410.65 有什么办法解决这个问题吗？

Answer 1

不幸的是，2009 年和 2012 年规范之间的差异不仅仅涉及不同的属性名称。实施不完整的草稿始终是一场赌博，因此假设遵循较新规范的浏览器具有正确行为（即使它不是您想要的行为）总是更安全。

Flexbox 的美妙之处在于它提供了许多不同的方法来实现特定的布局。Flexbox 的一个被低估的特性是，auto的值用于顶部和底部边距确实做到了它听起来的样子，它正是您在这里需要的，而不是 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>