<div class="flex-box">
<div class="flex">
<div class="bbb">1</div>
<div class="bbb">2</div>
<div class="bbb">3</div>
<div class="bbb">4</div>
<div class="bbb">5</div>
<div class="bbb">6</div>
</div>
<div class="flex column-r">
<div class="bbb">1</div>
<div class="bbb">2</div>
<div class="bbb">3</div>
<div class="bbb">4</div>
<div class="bbb">5</div>
<div class="bbb">6</div>
</div>
</div>
.flex-box{
display: flex;
}
.flex{
width: 400px;
height: 500px;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.bbb{
flex-shrink: 0;
height: 200px;
border:3px solid firebrick;
background-color: khaki;
}
.column-r{
flex-direction: column-reverse;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.