Czy w Chrome występuje błąd z uzasadnieniem-treść: odstęp między i minimalna wysokość?

Question

Oto kod pracuję nad:

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

i otrzymuję wynik przewidywalny Firefox:

Ale w Chrome jestem coraz następny wynik:

Dlaczego dostaję tę przestrzeń pod dolnym elementem?

Można to naprawić, zmieniając css min-height na height, ale w moim kontekście ważne jest, aby mieć tutaj wartość min-height.

Try it in jsFiddle

PS: To zachowanie jest odtwarzane tylko w Chrome i Canary i wydaje się tylko w systemie Windows.

Moja env: Chrome Wersja 56.0.2924.87 (64-bit) i Win 10

Answer 1

To z pewnością wygląda jak robaka.

W każdym przypadku można obejść przy marży 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 marże są częścią specyfikacji i mogą być wykorzystane do wyrównania flex przedmiotów.

Pełne wyjaśnienie tutaj: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

Tak, wydaje się błędem w chromie.

Oto alternatywny sposób, aby uzyskać ten sam rezultat:

1. Korzystając flex-direction: row FLEX dzieci.
2. Umożliwia owijanie elastycznych dzieci, włączając flex-wrap: wrap i ustawiając flex-basis: 100%, tak aby miały pełną szerokość.
3. Ustaw wyrównanie ostatniego potomka na 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>

Answer 3

Pamiętam, że miałem podobny problem kilka ćmy temu. Wynika to z faktu, że wysokość jest ustawiona na auto, spróbuj ustawić inną wartość dla właściwości height, a problem zostanie rozwiązany.

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