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:
flex-2
hat eine Höhe von 100% (was seltsam ist, weil ein flex-Element hat standardmäßig 100% + es ist buggy in Chrome)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 zuauto
, dann Sie machen, wieheight:100%
wie ich versuche zu tun. Es ist definitiv nicht intuitiv, wie es funktionieren sollte.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich eine ähnliche Frage beantwortet hier.
Ich weiß, Sie haben schon gesagt
position: absolute;
ist unbequem, aber es funktioniert. Siehe unten für weitere Informationen über die Festsetzung der resize-Problem.Sehen das auch jsFiddle für eine demo, obwohl ich nur Hinzugefügt webkit-Präfixe, so öffnen sich in Chrome.
Haben Sie grundsätzlich 2 Probleme die ich Angebot mit separat.
position: relative;
auf die Eltern des Kindes.position: absolute;
auf das Kind.overflow-y: auto;
auf das scrollbare div.height: 0;
Sehen diese Antwort für mehr Informationen auf die Scroll-Problem.
Wenn ich das richtig verstehe, wollen Sie die flex-2-Kind-füllen Sie die Höhe und Breite des übergeordneten Elements ein, so dass die rote Fläche ist vollständig bedeckt von den grünen?
Wenn das so ist, brauchen Sie nur legen Sie flex 2 verwenden, flexbox:
Dann sagen, flex-2-Kind, sich flexibel:
Sehen http://jsfiddle.net/2ZDuE/10/
Der Grund dafür ist, dass die flex-2-Kind ist nicht eine flexbox-Element, aber Ihre Muttergesellschaft ist.
align-items: center
wenn Siealign-self: stretch
auf nur ein Kind.min-height: 100vh;
zu.flex-2
element, um es zu arbeiten. Vielen Dank für die Hilfe!Verwenden
align-items: 'stretch'
Ähnlich wie David Etagen die Antwort, meine Arbeit um
Alternativ zu
align-items
verwenden, können Siealign-self
nur auf die.flex-2-child
Artikel, den Sie möchten gestreckt.stretch
: dies sollte die gewählte Antwort.Ich nehme an, dass Chrome das Verhalten ist mehr im Einklang mit der CSS-spec (wenn es weniger intuitiv ist). Nach Flexbox-spec, die die Standard -
stretch
Wert vonalign-self
Eigenschaft ändert sich nur die verwendet Wert des Elements "Kreuz size-Eigenschaft" (height
, in diesem Fall). Und so wie ich das verstehe die CSS2.1 spec, der Anteil der Höhen, die berechnet werden aus der angegeben Wert des Elternteilsheight
, nicht seinen Wert. Der angegebene Wert der Elternheight
ist nicht betroffen flex-Eigenschaften und ist immer nochauto
.Festlegung expliziter
height: 100%
macht es formal möglich, berechnen Sie die prozentuale Höhe des Kindes, genau wie die Einstellungheight: 100%
zuhtml
es ermöglicht die Berechnung der prozentualen Höhe derbody
in CSS2.1.height:100%
zu.flex-2
. Hier ist die jsfiddle.height: 100%
gibt sehr seltsame Ergebnisse für mich in Chrom. Es scheint, dass dies bewirkt, dass die "soll-Höhe" gesetzt werden, um die Gesamthöhe des Containers, anstatt die Höhe des Elementes selbst, so verursacht unerwünschte scrollen, wenn andere Elemente haben Größen berechnete relative.Fand ich die Lösung von mir, angenommen, Sie haben die CSS-unten:
In diesem Fall, die Einstellung der Höhe von 100% wird nicht funktionieren, so was ich tun, ist die Einstellung der
margin-bottom
Regelauto
wie:wird und das Kind ausgerichtet werden, um die oberste von den Eltern erhalten, können Sie auch die
align-self
Regel sowieso, wenn Sie bevorzugen.Eine Idee wäre, dass
display:flex;
mitflex-direction: row;
füllt diecontainer
div mit.flex-1
und.flex-2
, aber das bedeutet nicht, dass.flex-2
hat eine Standard -height:100%;
auch wenn Sie verlängert auf die volle Höhe und haben ein Kind-element (.flex-2-child
) mitheight:100%;
müssen Sie die Eltern zuheight:100%;
oder verwenden Siedisplay:flex;
mitflex-direction: row;
auf die.flex-2
div zu.Was weiß ich
display:flex
nicht verlängern wird alle Ihre child-Elemente Höhe bis zu 100%.Eine kleine demo, entfernt, die Höhe von
.flex-2-child
und verwendetdisplay:flex;
auf.flex-2
:http://jsfiddle.net/2ZDuE/3/
html
css
http://jsfiddle.net/2ZDuE/750/
.container {
. . . .
align-items: stretch;
. . . .
}
Dies ist meine Lösung mit css+
Vor allem wenn das erste Kind (flex-1) sollte 100px sollte nicht flex.
In css+ in der Tat können Sie festlegen, flexible und/oder statische Elemente (Spalten oder Zeilen) und Ihr Beispiel werden so einfach wie diese:
container css:
und offenbar auch css+ 0.2 core
hören, die fiddle