Chrome 中是不是存在 justify-content: space-between 和 min-height 的错误？

Posted 2023-03-05

【中文标题】Chrome 中是不是存在 justify-content: space-between 和 min-height 的错误？

【英文标题】：Is there a bug in Chrome with justify-content: space-between and min-height?Chrome 中是否存在 justify-content: space-between 和 min-height 的错误？

【发布时间】：2017-06-28 22:10:44

【问题描述】：

这是我正在处理的代码：

.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

【参考方案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 边距是规范的一部分，可用于对齐弹性项目。

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

【讨论】：

这个修复的大道具。我很想了解为什么会修复它。你为什么首先尝试这个修复？这真的不直观，它应该可以解决问题。

@AndreiGheorghiu, flex auto 边距是规范的一部分。它们直接应用于弹性项目。更新了我的答案。

【参考方案2】：

我记得几天前我也遇到过类似的问题。这是因为高度设置为自动，尝试为高度属性设置另一个值，问题将得到解决。

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

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

【参考方案3】：

是的，看起来像是 chrome 中的一个错误。

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

将flex-direction: row 用于弹性子代。 通过启用 flex-wrap: wrap 并设置 flex-basis: 100% 以使它们具有全宽，允许对 flex 子项进行换行。 将最后一个孩子的对齐方式设置为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>