Verhindern, dass ein flex-Elemente Höhe von erweitert, um mit anderen flex-Elemente
Habe ich zwei Elemente in einem container, die side-by-side mit flex-box. Auf dem zweiten element (.flexbox-2
), ich bin festlegen es ist die Höhe in der CSS. Doch dann das erste element (.flexbox-1
) entspricht die Höhe der .flexbox-2
. Wie würde ich aufhören .flexbox-1
passend die Höhe der .flexbox-2
, und stattdessen nur die behalten Ihre Natürliche Höhe?
Hier ist was ich bisher (auch als jsFiddle)
CSS:
.container {
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flexbox-1 {
-webkit-flex: 1;
border: solid 3px red;
}
.flexbox-2 {
-webkit-flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}
HTML:
<div class="container">
<div class="flexbox-1">.flexbox-1</div>
<div class="flexbox-2">.flexbox-2</div>
</div>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Solange der flex-container hat keine Höhe selbst, können Sie
height: 0%
auf den ersten flex-Element. Denn es hat keine Höhe von seinem übergeordneten Element Erben, alle Prozentsatz Höhe führt zu einem Zusammenbruch. Es wird wachsen mit dem Inhalt.Beispiel
In diesem Beispiel habe ich entfernt, die
-webkit
Präfix. Es ist nur wirklich erforderlich für Safari und den Präfix Hinzugefügt werden können oben die version ohne Präfix. Ich habe auch entferntflex-direction: row
wie es der Standardwert ist.CSS:
HTML:
Ich weiß, das ist eine alte Frage, aber eine bessere Lösung ist, um die flex-Element zu richten an die Spitze mit
flex-start
.CSS:
HTML:
align-items: center, baseline, flex-start, flex-end
sind so gut funktioniertalign-items
iststretch
.Einstellung der
height
Kindermax-content
wird verhindern, dass Sie zu schrumpfen.CSS:
HTML: