<div class = 'container'>
<ul class='list'>
<li class = 'item'>1</li>
<li class = 'item'>2</li>
<li class = 'item'>3</li>
<li class = 'item'>4</li>
<li class = 'item'>5</li>
<li class = 'item'>6</li>
<li class = 'item'>7</li>
</ul>
<ul class='list'>
<li class = 'item'>1</li>
<li class = 'item'>2</li>
<li class = 'item'>3</li>
</ul>
</div>
.container {
height: 200px;
overflow-y: auto;
background-color: lightcoral;
display: flex;
}
.container > :first-child {
margin-right: 20px;
}
.list {
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
padding: 0;
}
.item {
flex-shrink: 0;
height: 40px;
width: 100px;
border: 1px solid black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.