Chrome中是否有一个包含正当内容的错误:空格和最小高度之间的间距? [英] Is there a bug in Chrome with justify-content: space-between and min-height?

问题描述

这是我正在处理的代码:

Here is code I working on:

.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中，我得到了可预测的结果:

And I am getting predictable result in Firefox:

但是在Chrome浏览器中，我得到下一个结果:

But in Chrome I am getting next result:

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

Why I am getting this space under the bottom element?

可以通过将css min-height更改为height来解决，但就我而言，在此处具有min-height值很重要.

It could be fixed by changing css min-height to height, but in my context it's important to have min-height value here.

在jsFiddle中尝试

P.S.此行为仅在Chrome和Canary中得以重现，并且仅在Windows上才出现.

P.S. This behavior is reproduced only in Chrome and Canary, and seems only on Windows.

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

My env: Chrome Version 56.0.2924.87 (64-bit) and Win 10

推荐答案

它肯定看起来像个错误.

It certainly looks like a bug.

无论如何，您都可以使用auto边距来解决它:

In any case, you can work around it with an auto margin:

.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项目.

Flex auto margins are part of the spec and can be used to align flex items.

此处的完整说明:在CSS Flexbox中，为什么没有"justify-items"?和自我证明".属性?

这篇关于Chrome中是否有一个包含正当内容的错误:空格和最小高度之间的间距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！