Css 堆叠flexbox垂直定心不在镀铬中工作

以下情况在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>

我希望第二个flexbox容器（.flex-item>div）是flex子容器（.flex-item）的全高，但它似乎不起作用。（仅限铬）

我的解决方法是使用绝对位置，但我不想使用它

代码笔：

在Firefox中打开查看所需结果，在Chrome中打开查看当前情况

---

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

以下是正在工作的SCS：

.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项
并移除
高度：100%

以下是演示：
惊人的快速和正确！我希望我能给你一个向上的投票。我把它整合到我的网站上，注意到现在所有的东西都默认垂直对齐到中间(
.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
            }
        }
    }
}