/ / Czy można zmusić kolumnę Flexbox, aby nie rosła poza wysokość innej kolumny? - html, css, css3, flexbox

Czy można zmusić kolumnę Flexbox, aby nie rosła poza wysokość innej kolumny? - html, css, css3, flexbox

Zasadniczo temat mówi wszystko.

<div class="container">
<div class="column1">
Some text
</div>
<div class="column2">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>

Oto jsfiddle

chcę column2 mieć wysokość column1 wysokość treści i stać się przewijane dla reszty listy.

Jest to możliwe dzięki czystemu flexbox?

Odpowiedzi:

3 dla odpowiedzi № 1

Możesz mieć display: flex na Twoim container ale to nie jest konieczne.

Sztuką jest ustawić kolumnę 2 na display: absolute.

.container {
display: flex;
width: 200px;
position: relative;
}

.column1 {
background-color: red;
flex: 1;
}

.column2 {
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 100%;
background-color: cyan;
overflow: auto;
}
<div class="container">
<div class="column1">
Bla <br>
Bla <br>
Bla <br>
Bla <br>
Bla <br>
Bla <br>
Bla <br>
Bla <br>
</div>
<div class="column2">
Bla 2 <br> Bla 2 <br> Bla 2 <br>
Bla 2 <br> Bla 2 <br> Bla 2 <br>
Bla 2 <br> Bla 2 <br> Bla 2 <br>
Bla 2 <br> Bla 2 <br> Bla 2 <br>
Bla 2 <br> Bla 2 <br> Bla 2 <br>
Bla 2 <br> Bla 2 <br> Bla 2 <br>
</div>
</div>