html - 无法在 Chrome 中将 flexbox 子项高度设置为 100%

Question

我试图让下面的蓝色框填满按钮的整个高度，但它似乎不起作用。为什么height: 100%对.el元素不起作用？

button {
  background: red;
  height: 55px;
  display: flex;
  align-items: center;
}

.el {
  display: block;
  background: blue;
  height: 100%;
}

<button>
  <span class="el">
    Content
  </span>
  Other
</button>

输出（铬 76）：

其他浏览器似乎显示了预期的结果：
Edge: Firefox:

标签： htmlcssflexboxheight

Answer 1

尝试

.el {
  display: block;
  background: blue;
  height: inherit;
}