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

score 6 · Accepted Answer · edited May 23 '17 at 12:16

6

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?

edited May 23 '17 at 12:16

Community

1
1

answered Feb 10 '17 at 14:16

Michael Benjamin

346,931
104
581
701

Big props for this fix. I am quite interested in understanding why this fixes it. Why did you try this fix in the first place? It's really not intuitive it should fix the issue. – tao Feb 10 '17 at 14:19
@AndreiGheorghiu, flex `auto` margins are a part of the spec. They apply directly to flex items. Updated my answer. – Michael Benjamin Feb 10 '17 at 14:23

score 6 · Answer 2 · answered Feb 10 '17 at 14:20

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>

score 1 · Answer 3 · answered Feb 10 '17 at 14:17

Yes, seem like a bug in chrome.

Here is an alternate way to get the same result:

Use flex-direction: row for flex children.
Allow wrapping of flex children by enabling flex-wrap: wrap and set flex-basis: 100% to make them having full width.
Set the alignment of last child to the 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>

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

3 Answers3

Linked