Zu machen, wie die flexbox-Kinder 100% der Höhe Ihrer Eltern?

Ich versuche zu füllen, der vertikale Abstand von einem flex-Element innerhalb einer flexbox.

CSS:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

HTML:

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

Und hier ist die JSFiddle

flex-2-child füllen nicht die erforderliche Höhe, außer in den zwei Fällen, in denen:

  1. flex-2 hat eine Höhe von 100% (was seltsam ist, weil ein flex-Element hat standardmäßig 100% + es ist buggy in Chrome)
  2. flex-2-child hat position absolute, die ist auch unbequem

Dies funktioniert nicht in Chrome oder Firefox, aktuell.

  • was ist das problem mit height:100%; für .flex-2 ?
  • Es trotzt der Zweck der flex-Element, das zum füllen der Inhalt von selbst, und es gibt mir die seltsamsten Fehler in chrome bei der die Höhe geht zurück auf null, wenn ich die Größe der Fenster
  • Firefox-Versionen, die noch Folgen die spec von 2009 (display: box) Verhalten sich sehr Verschieden von den Versionen, die Folgen der modernen spec. Wenn FF sich schlecht benimmt, würde ich empfehlen, Drop Unterstützung für Sie.
  • Tatsächlich, die neueste version von Firefox ist die einzige, die richtig funktioniert
  • Derzeit gibt es signifikante Unterschiede im Verhalten unter den Browsern, wenn es um rendering Prozentsatz Höhen in flexbox: stackoverflow.com/a/35537510/3597276
  • Ja, Chrome hat einige Probleme, vor allem mit verschachtelten flexboxes. Zum Beispiel habe ich eine verschachtelte flex-box mit den Kindern, der height:100% aber Sie sind rendering mit natürlichen Höhe statt. Und das seltsame ist, wenn ich ändern Sie Ihre Höhe zu auto, dann Sie machen, wie height:100% wie ich versuche zu tun. Es ist definitiv nicht intuitiv, wie es funktionieren sollte.

InformationsquelleAutor Raz | 2013-03-13
Schreibe einen Kommentar