CSS3-Flexbox zum Anpassen der Höhe vertikal ausgerichteter Elemente
Ist es möglich zu machen.item-1
höhenflexibel und verstellbar.item-2
Höhe? Zum Beispiel:
.item-1
Höhe ist10%
dann.item-2
Höhe ist90%
ob.item-1
Höhe ist11%
dann.item-2
Höhe ist89%
Also je nach Inhalt der.item-1
Wir sollten die Größe ändern.
HTML
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
</div>
CSS
html,
body,
.container {
height: 100%;
}
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
-moz-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
}
.item {
background: #eee;
margin: 1px;
}
.item-1 {
-webkit-box-flex: 3 3 100%;
-moz-box-flex: 3 3 100%;
-webkit-flex: 3 3 100%;
-ms-flex: 3 3 100%;
flex: 3 3 100%;
}
.item-2 {
-webkit-box-flex: 1 1 100%;
-moz-box-flex: 1 1 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}