/ Je možné vynútiť, aby jeden stĺp flexboxu neklesol nad výšku iného stĺpca? - html, css, css3, flexbox

Je možné vynútiť, aby jeden stĺp flexboxu neklesol za výšku iného stĺpca? - html, css, css3, flexbox

V podstate to hovorí všetko.

<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>

Tu je jsfiddle

Chcem column2 mať výšku column1 obsahovej výšky a stáva sa posunutím pre zvyšok zoznamu.

Je možné s čistým flexboxom?

odpovede:

3 pre odpoveď č. 1

Môžeš mať display: flex na tvojom container ale nie je to potrebné.

Trikom je nastaviť stĺpec 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>