这是我正在处理的代码：
.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值很重要.
附：此行为仅在Chrome和Canary中重现,并且似乎仅在Windows上.
我的环境：Chrome版本56.0.2924.87(64位)和Win 10
解决方法
它当然看起来像一个bug.
.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自动边距是规范的一部分,可用于对齐flex项目.
这里有完整的解释：In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?
