Overflow-y empty space bug? - css

Question

This seems to be a fairly common and not-fancy use case, but I haven't run into it before. I set up a pen, but can't replicate it there, and I'm pulling my hair out trying to figure out why.
Demo Pen
The left sidebar has a custom scroll-window for a list of items, but though setting overflow-y: scroll gives me a nice scrollable list, it also creates a huge block of whitespace equal to the height of the list on the left if overflow-y wasn't set to scroll. This whitespace is outside of the HTML tag (and because that blue background stops). So it appears there's something going on with height calculations, but I just don't know what else I can play with.
In my app, I've tried commenting out both the overflow-y and display: grid on my content wrapper, and upon doing either, the whitespace disappears. But of course I need both of these properties. Do I need to set another height somewhere?

Answer 1

I found the issue finally! Had to do with absolutely-positioned elements. I'm using custom checkboxes to do a filled square instead of the browser's defaults, and part of that code (which I borrowed and modified) was to set the input itself to position:absolute which took it out of normal flow of course (hence why my 100vh wasn't making a difference). Adding simply top: 0 fixed it all. I'd love if somebody could explain why setting top to its default value makes a difference here.
HTML (Angular)
<li class="flex justify-between" *ngFor="let error of hardSummary">
<input class="m-checkbox" id="{{'h' + error.errorCode}}" type="checkbox" [(ngModel)]="error.isChecked" (click)="filterByError(error)">
<label for="{{'h' + error.errorCode}}">
{{error.errorCode}}
</label>
<span>{{error.count}}</span>
</li>
SCSS:
.m-checkbox {
position: absolute;
opacity: 0; // hide it
top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD
& + label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
& + label:before {
content: '';
margin-right: 4px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: #f4f4f4;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
// Box hover
&:hover + label:before {
background: #d8d8d8;
}
// Box focus
&:focus + label:before {
border: 1px solid #666;
}
// Box checked
&:checked + label:before {
background: #448aff;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
transition: all 0.2s;
}
}