Is there a bug in Chrome with justify-content: space-between and min-height?

Question

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>

And I am getting predictable result in Firefox:

But in Chrome I am getting next result:

Why I am getting this space under the bottom element?

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

Try it in jsFiddle

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

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

Answer 1

It certainly looks like a bug.

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 margins are part of the spec and can be used to align flex items.

Full explanation here: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

I remember that I had similar problem a couple of moths ago. This is because the height is set to auto, try to set another value for height property and the problem will be solved.

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