html - Chrome 中是否存在带有 justify-content : space-between and min-height? 的错误

Question

这是我正在处理的代码:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  background-color: #cbcbcb;
}

<div class="container">
  <div>should be on the TOP</div>
  <div>should be on the BOTTOM</div>
</div>

我在 Firefox 中得到了可预测的结果:

但在 Chrome 中我得到下一个结果:

为什么我在底部元素下得到这个空间？

它可以通过将 css min-height 更改为 height 来修复，但在我的上下文中，重要的是在此处设置 min-height 值.

Try it in jsFiddle

附言此行为仅在 Chrome 和 Canary 中重现，并且似乎仅在 Windows 上出现。

我的环境:Chrome 版本 56.0.2924.87(64 位)和 Win 10

Answer 1

它确实看起来像一个错误。

在任何情况下，您都可以使用 auto 边距来解决它:

.container {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  background-color: #cbcbcb;
}
.container > div:last-child {
  margin-top: auto;
}

<div class="container">
  <div>should be on the TOP</div>
  <div>should be on the BOTTOM</div>
</div>

Flex auto 边距是规范的一部分，可用于对齐 flex 元素。

完整解释在这里:In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?