Ich habe ein proaktives Prozentbasiertes Raster, das mit flexbox erstellt wurde und prozentuale Ränder verwendet. Es spielt gut in Chrome und Safari. Firefox minimiert jedoch die Ränder, sofern für die Elemente keine explizite Höhe festgelegt ist. Wer kennt einen Workaround?
Dies wurde zuvor als Fehler in Firefox / Gecko gemeldet, aber es ist tatsächlich ein Fehler in Chrome / Blink .
Bei einem Kind eines Blocks ( display:block ) Element, Prozent Marge & amp; Padding wird gegen die Breite des Blocks aufgelöst. Das ist wahrscheinlich das Verhalten, das Sie erwarten, und das ist es, was Blink falsch für Kinder von Flex-Containern tut, wie in der Bug-Seite oben beschrieben.
Aber , in einem Flex-Container, Prozent Marge & amp; Padding sollte gegen die jeweilige Dimension aufgelöst werden (also zB margin-top / margin- unten wird gegen die Höhe des Containers aufgelöst).
Wenn der Container keine bestimmte Höhe hat (z. B. height:auto ), können die Prozentsätze nicht aufgelöst werden, sodass sie auf 0 aufgelöst werden.