溢出:自动导致使用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>

如果你垂直调整结果大小,你会看到较新的flex模型中的"HELLO"消失,如果你向下滚动,它会给你一个底部空白区域.另一方面,旧的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>