У меня есть два элемента внутри контейнера, которые бок о бок, используя гибкую коробку. На втором элементе (.flexbox-2
) я устанавливаю его высоту в CSS. Однако тогда первый элемент (.flexbox-1
) будет соответствовать высоте .flexbox-2
. Как остановить .flexbox-1
от соответствия высоте .flexbox-2
, а вместо этого сохранить естественную высоту?
Вот что я до сих пор (также доступен как jsFiddle)
.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;
}
<div class="container">
<div class="flexbox-1">.flexbox-1</div>
<div class="flexbox-2">.flexbox-2</div>
</div>