Gibt es in Chrome einen Bug mit justify-content: space-between und min-height?

8

Hier ist der Code, an dem ich arbeite:

%Vor% %Vor%

Und ich bekomme vorhersehbares Ergebnis in Firefox:

Aber in Chrome bekomme ich das nächste Ergebnis:

Warum bekomme ich diesen Raum unter das untere Element?

Es könnte behoben werden, indem css min-height in height geändert wird, aber in meinem Kontext ist es wichtig, hier min-height value zu haben.

Versuchen Sie es in jsFiddle

P.S. Dieses Verhalten wird nur in Chrome und Canary reproduziert und scheint nur unter Windows zu bestehen.

Mein env: Chrome Version 56.0.2924.87 (64-Bit) und Win 10

    
ilyabasiuk 10.02.2017, 14:11
quelle

3 Antworten

5

Sieht sicher wie ein Fehler aus.

In jedem Fall können Sie mit einem auto margin umgehen:

%Vor% %Vor%

Flex auto Ränder sind Teil der Spezifikation und können zum Ausrichten von Flex-Elementen verwendet werden.

Ausführliche Erklärung hier: Warum gibt es in CSS Flexbox keine Eigenschaften "justify-items" und "justify-self"?

    
Michael_B 10.02.2017, 14:16
quelle
4

Ich erinnere mich, dass ich vor ein paar Monaten ein ähnliches Problem hatte. Dies liegt daran, dass die Höhe auf auto eingestellt ist, versuchen Sie, einen anderen Wert für die height -Eigenschaft festzulegen, und das Problem wird gelöst.

%Vor% %Vor%
    
Paweł 10.02.2017 14:20
quelle
1

Ja, scheint wie ein Fehler in Chrome.

Hier ist eine alternative Möglichkeit, das gleiche Ergebnis zu erhalten:

  1. Verwenden Sie flex-direction: row für Flex-Kinder.
  2. Lassen Sie das Umbrechen von Flex-Childs zu, indem Sie flex-wrap: wrap aktivieren und flex-basis: 100% auf volle Breite setzen.
  3. Legen Sie die Ausrichtung des letzten untergeordneten Objekts auf flex-end fest.

%Vor% %Vor%
    
Mohammad Usman 10.02.2017 14:17
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Redux-Form Aktualisierungsfeldwert von externer Interaktion