tutorial - html flex table




Warum passt sich kein Platz in der Fixierung an? (2)

Aus der Flexbox-Spezifikation :

Autoren sollten vermeiden, Prozentsätze in Polsterungen oder Ränder auf Flex-Elemente ganz zu verwenden, da sie unterschiedliche Verhalten in verschiedenen Browsern bekommen werden.

Hier noch etwas mehr:

4.2. Flex Item Ränder und Polsterungen

Prozentuale Ränder und Polsterungen auf Flex-Items können entweder gelöst werden:

  • Ihre eigene Achse (linke / rechte Prozentsätze lösen sich gegen die Breite, oben / unten lösen gegen die Höhe) oder,
  • Die Inline-Achse (links / rechts / oben / unten Prozentsätze alle lösen sich gegen die Breite)

Ein User Agent muss eines dieser beiden Verhaltensweisen wählen.

Anmerkung: Diese Varianz saugt, aber es erfasst genau den aktuellen Stand der Welt (kein Konsens zwischen den Implementierungen und kein Konsens innerhalb der CSSWG). Es ist die Absicht des CSSWG, dass die Browser auf einem der Verhaltensweisen konvergieren werden, zu welcher Zeit die Spezifikation geändert wird.

Ich möchte ein Quadrat in einer Flexbox haben. Also ich benutze:

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50%;
}
<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>

Das funktioniert gut in Chrome. Aber in Firefox drückt das Elternteil nur eine Zeile.

Wie löse ich das in Firefox? Ich benutze Version 44.

Sie können den Code auch unter https://jsbin.com/lakoxi/edit?html,css anzeigen


Neben der Antwort von Michael_B ist hier ein möglicher Workaround.

Bei der Verwendung von Prozent beziehen wir uns oft auf die Ansichtsfensterbreite, also in diesem Sinne können Viewport-Einheiten vw / vh eine Option sein, da es ähnlich (ansprechend) funktioniert.

Stack-Snippet

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50vw;
}
<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>







flexbox