Is there an error in Chrome using justify-content: space-between and min-height?

Question

Here is the code I'm 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 get the predicted result in Firefox:

But in Chrome I get the following result:

Why am I getting this space under the bottom element?

This can be fixed by changing css min-height to height , but in my context it is important to have a min-height value here.

Try it in jsFiddle

PS This behavior is reproduced only in Chrome and Canary and is similar only to Windows.

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

Answer 1

It certainly looks like a mistake.

In any case, you can bypass it using the auto field:

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

The full explanation is here: In CSS Flexbox, why are there no “justifiable elements”? and "justify-self" properties?

Answer 2

I remember that I had a similar problem a couple of months ago. This is because the height is set to auto, try setting a different value for the 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> 

Answer 3

Yes, it seems like a bug in chrome.

Here is an alternative way to get the same result:

• Use flex-direction: row for flexible kids.
• Allow wrapping flex children by enabling flex-wrap: wrap and set flex-basis: 100% so that they have full width.
• Set the alignment of the last child to 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>