Chrome中是否存在带有对齐内容的错误：space-between和min-height？

Question

以下是我正在处理的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在Firefox中获得了可预测的结果：

但是在Chrome中我会得到下一个结果：

为什么我在底部元素下获得此空间？

可以通过将css min-height更改为height来解决此问题，但在我的上下文中，此处有min-height值非常重要。

Try it in jsFiddle

P.S。此行为仅在Chrome和Canary中重现，并且似乎仅在Windows上。

我的环境：Chrome版本56.0.2924.87（64位）和Win 10

Answer 1

它当然看起来像一个bug。

在任何情况下，您都可以使用auto页边距来处理它：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Flex auto页边距是规范的一部分，可用于对齐弹性项目。

此处有完整说明：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

我记得几个月前我遇到过类似的问题。这是因为高度设置为auto，尝试为height属性设置另一个值，问题就解决了。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

是的，好像是Chrome中的一个错误。

以下是获得相同结果的另一种方法：

1. 对弹性儿童使用flex-direction: row。
2. 启用flex-wrap: wrap并设置flex-basis: 100%以使其具有全宽，以允许包装儿童。
3. 将最后一个孩子的对齐方式设置为flex-end。

.container {
  display: flex;
  flex-wrap: wrap;    
  min-height: 150px;
  background-color: #cbcbcb;    
}
.container div {
  flex-basis: 100%;
}
.container div:last-child {
  align-self: flex-end;
}

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