Chrome/Safari未填充flex父级的100%高度

Question

我想有一个垂直的菜单，有一个特定的高度。

每个子级必须填充父级的高度并具有中间对齐的文本。

孩子的数量是随机的，所以我必须使用动态值。

Div.container包含随机数的子级(.item)，这些子级总是必须填充父级的高度。为了实现这一点，我使用了FlexBox。

为了使链接中的文本对齐，我使用了display:table-cell技术。但是使用表格显示需要使用100%的高度。

我的问题是.item-inner{height:100%}在webkit（Chrome）中不工作。

1. 有解决此问题的方法吗？
2. 或者是否有其他技术来使所有.item用垂直对齐到中间的文本填充父级的高度？

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

Answer 1

使用嵌套的flex容器。

去掉高度百分比。删除表属性。删除垂直对齐。避免绝对定位。只要一直坚持使用flexbox就行了。

将display:flex应用于flex项(.item)，使其成为flex容器。这会自动设置align-items:streting，它告诉子级(.item-inner)扩展父级的整个高度。

重要提示：从flex项中删除指定的高度，以便此方法工作。如果子级指定了高度（例如height:100%)，则它将忽略来自父级的align-items:strett。要使strett默认值起作用，必须将孩子的高度计算为auto（完整解释）。

尝试此操作（不更改HTML）：

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>