Let's imagine that we have some list container (a div in the code below) that we need to be able to resize the viewport it is visible on. We need some border around the list's content (border has "brown" color in my example). So here is the problem.
If the list content fits in viewport without scrolling then the border must envelop the list content tightly (so I can't set the border to div "Column Left" because I don't need the border around the whole large area which can potentially contain list items).
If the viewport is small and the list content is to scroll then the border must persist (I miss it at the container's top and bottom in my vertial list example).
That's pretty common behaviour for GUI.
.bkgnd {
position: absolute;
background-color: grey;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.Column{
overflow: auto;
position: absolute;
}
.Left{
width: 460px;
top: 100px;
bottom: 70px;
left: 17px;
}
.ListItem{
background-color: yellow;
margin: 5px 0 0 0;
}
.ListItem:first-child{
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="bkgnd">
<div class="Column Left">
<div style="padding: 5px; background-color: brown;">
<div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
<div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
<div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
<div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
<div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
<div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
</div>
</div>
</div>
</body>