堆叠的flexbox垂直居中不在chrome中工作

Question

以下情况在Google Chrome中无效;

<div class="flex-container">
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
</div>

SCSS

body,html {
  height:100%;
  background:#1D1F20;
  font-family:sans-serif;
  color:#fff;
}
.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height:100%;
  .flex-item {
    flex: 1 1 auto;
    align-self: center;
    background:#87BEB7;
    padding:0 10px;
    &:nth-child(2) {
      background:#ADBEBC;
    }
    &:nth-child(3) {
      background:#BE8A74;
    }
    > div {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      height:100%; // This seems to be the issue
      div {
        flex: 0 1 auto;
        align-self: center;
        background:#5C726F;
        padding:10px
      }
    }
  }
}

我希望第二个flexbox容器(.flex-item> div)是flex-child(.flex-item)的完整高度,但它似乎不起作用.(仅镀铬)

我的解决方法涉及使用绝对位置,但我宁愿不使用它.

Codepen:http://codepen.io/anon/pen/QwpzLX

在Firefox中打开以查看所需结果,并在Chrome中查看当前情况.

任何帮助或建议将不胜感激.

Answer 1

这是工作scss:

.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height:100%;
    .flex-item {
        flex: 1 1 auto;
        align-self: center;
        background:#87BEB7;
        padding:0 10px;
        display: flex;

        &:nth-child(2) {
            background:#ADBEBC;
        }
        &:nth-child(3) {
            background:#BE8A74;
        }
        > div {
            display: flex;
            justify-content: center;
            align-items: flex-start;

            div {
                flex: 0 1 auto;
                align-self: center;
                background:#5C726F;
                padding:10px
            }
        }
    }
}

你必须设置display:flex;到.flex-item并删除height: 100%.

这是演示:http://jsfiddle.net/omgL91r8/1/