Ich versuche, den vertikalen Raum eines Flex-Elements in einer Flexbox zu füllen.
.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;
}
<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üllt die erforderliche Höhe nur in den beiden Fällen aus, in denen:
flex-2
hat eine Höhe von 100% (was seltsam ist, weil ein Flex-Element standardmäßig 100% hat + es ist in Chrome fehlerhaft)flex-2-child
hat eine absolute Position, die auch unpraktisch ist
Dies funktioniert derzeit nicht in Chrome oder Firefox.
height:100%
diese haben, aber stattdessen mit natürlicher Höhe rendern. Und das Seltsame ist, wenn ich ihre Größe auf ändereauto
, rendern sie so,height:100%
wie ich es versucht habe. Es ist definitiv nicht intuitiv, ob es so funktionieren sollte.Antworten:
Verwenden
align-items: stretch
Ähnlich wie bei David Storeys Antwort lautet meine Problemumgehung:
Alternativ
align-items
können Siealign-self
nur den.flex-2-child
Gegenstand verwenden, den Sie dehnen möchten.quelle
stretch
: Dies sollte die gewählte Antwort sein.height: 100%
Komponente zu entfernen , die dieselbe Größe wie die übergeordnete Komponente haben sollheight: 100%
der Antwort das Entfernen hinzu - ich habe fast aufgegeben und dies erst im letzten Moment gesehen, bevor ich darauf zurückkamabsolute
- was mit allen möglichen Problemen verbunden ist.Ich habe eine ähnliche Frage beantwortet hier .
Ich weiß, dass Sie bereits gesagt haben,
position: absolute;
ist unpraktisch, aber es funktioniert. Weitere Informationen zum Beheben des Größenänderungsproblems finden Sie weiter unten.In dieser jsFiddle finden Sie auch eine Demo, obwohl ich nur Webkit-Präfixe hinzugefügt habe, die in Chrome geöffnet sind.
Sie haben grundsätzlich zwei Probleme, die ich separat behandeln werde.
position: relative;
auf dem Elternteil des Kindes.position: absolute;
auf das Kind.overflow-y: auto;
das scrollbare Div auf.height: 0;
Weitere Informationen zum Bildlauf finden Sie in dieser Antwort .
quelle
Wenn ich das richtig verstehe, möchten Sie, dass Flex-2-Child die Höhe und Breite seines Elternteils ausfüllt, damit der rote Bereich vollständig vom Grün bedeckt wird?
Wenn ja, müssen Sie nur flex-2 einstellen, um flexbox zu verwenden:
Dann sagen Sie flex-2-child, dass es flexibel werden soll:
Siehe http://jsfiddle.net/2ZDuE/10/
Der Grund dafür ist, dass flex-2-child kein Flexbox-Element ist, sondern das übergeordnete.
quelle
align-items: center
wenn Siealign-self: stretch
nur für ein Kind verwenden.min-height: 100vh;
um.flex-2
Element funktioniert es zu machen. Danke für die Hilfe!Ich nehme an, dass das Verhalten von Chrome besser mit der CSS-Spezifikation übereinstimmt (obwohl es weniger intuitiv ist). Gemäß der Flexbox-Spezifikation ändert der Standardwert
stretch
deralign-self
Eigenschaft nur den verwendeten Wert der "Cross Size-Eigenschaft" des Elements (height
in diesem Fall). Und nach meinem Verständnis der CSS2.1-Spezifikation werden die prozentualen Höhen aus dem angegebenen Wert des übergeordneten Elements berechnetheight
, nicht aus dem verwendeten Wert. Der angegebene Wert des übergeordneten Elementsheight
wird von keinen Flex-Eigenschaften beeinflusst und bleibt bestehenauto
.Die explizite Einstellung
height: 100%
ermöglicht formal die Berechnung der prozentualen Größe des Kindes, genau wie die Einstellungheight: 100%
aufhtml
die Berechnung der prozentualen Größe vonbody
in CSS2.1.quelle
height:100%
auf.flex-2
. Hier ist die jsfiddle .height: 100%
führt in Chrome zu sehr merkwürdigen Ergebnissen. Es scheint, dass dies dazu führt, dass die "angegebene Höhe" auf die Gesamthöhe des Containers und nicht auf die Höhe des Elements selbst festgelegt wird. Dies führt zu unerwünschtem Bildlauf, wenn für andere Elemente Größen berechnet werden.Ich habe die Lösung selbst gefunden. Angenommen, Sie haben das folgende CSS:
In diesem Fall funktioniert das Festlegen der Höhe auf 100% nicht. Ich setze die
margin-bottom
Regel alsoauto
wie folgt :align-self
Wenn das Kind am obersten Punkt des Elternteils ausgerichtet ist, können Sie die Regel auch verwenden, wenn Sie dies bevorzugen.quelle
Eine Idee wäre, dass
display:flex;
mitflex-direction: row;
dascontainer
div mit.flex-1
und gefüllt wird.flex-2
, aber das bedeutet nicht, dass dies.flex-2
eine Standardeinstellung hat,height:100%;
selbst wenn es auf volle Höhe erweitert ist und um ein untergeordnetes Element (.flex-2-child
) mit zu haben, müssenheight:100%;
Sie das übergeordnete Element festlegenheight:100%;
oder verwendendisplay:flex;
mitflex-direction: row;
auf dem.flex-2
div auch.Soweit ich weiß,
display:flex
wird die Höhe aller untergeordneten Elemente nicht auf 100% erweitert.Eine kleine Demo, die die Höhe entfernt
.flex-2-child
und verwendetdisplay:flex;
auf.flex-2
: http://jsfiddle.net/2ZDuE/3/quelle
html
CSS
http://jsfiddle.net/2ZDuE/750/
quelle
Dies kann auch mit
align-self: stretch;
dem Element gelöst werden, das gedehnt werden soll.Manchmal ist es wünschenswert, nur ein Element in einem Flexbox-Setup zu dehnen.
quelle
.container {. . . . Elemente ausrichten: dehnen; . . . . }}
quelle
Dies ist meine Lösung mit CSS +
Zuallererst, wenn das erste Kind (Flex-1) 100px sein sollte, sollte es nicht Flex sein. In CSS + können Sie flexible und / oder statische Elemente (Spalten oder Zeilen) festlegen, und Ihr Beispiel wird so einfach:
Container CSS:
und offensichtlich enthalten CSS + 0,2 Kern
höre die Geige
quelle