/ / Ist es möglich, dass eine Flexbox-Spalte nicht über die Höhe einer anderen Spalte hinaus wächst? - html, css, css3, flexbox

Ist es möglich, dass eine Flexbox-Säule nicht über die Höhe einer anderen Säule hinaus wächst? - html, css, css3, flexbox

Grundsätzlich sagt das Thema alles.

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

Hier ist's

Ich will column2 Höhe von haben column1 Inhalt "s Höhe und für den Rest der Liste scrollbar werden.

Ist es mit reiner flexbox möglich?

Antworten:

3 für die Antwort № 1

Du kannst haben display: flex auf Ihrem container aber es ist nicht notwendig.

Der Trick besteht darin, Spalte 2 auf zu setzen 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>