Überlauf-y Leerraum Bug?

Question

Dies scheint ein recht verbreiteter und unpraktischer Anwendungsfall zu sein, aber ich bin noch nie darauf gestoßen. Ich stelle einen Stift auf, kann ihn aber nicht replizieren, und ich ziehe mir die Haare aus, um herauszufinden, warum.

Demo Pen

Die linke Seitenleiste hat ein benutzerdefiniertes Scroll-Fenster für eine Liste von Elementen, aber overflow-y: scroll gibt mir eine schöne scrollbaren Liste, obwohl Einstellung, es schafft auch einen großen Block von Leerzeichen entspricht der Höhe der linken Liste, wenn overflow-y nicht auf Scrollen eingestellt war. Dieser Leerraum befindet sich außerhalb des HTML-Tags (und weil dieser blaue Hintergrund aufhört). Es scheint also etwas mit Höhenberechnungen los zu sein, aber ich weiß einfach nicht, womit ich noch spielen kann.

In meiner App habe ich versucht, sowohl die overflow-y als auch die display: grid auf meinem Inhaltswrapper zu kommentieren, und wenn dies geschieht, verschwindet das Leerzeichen. Aber natürlich brauche ich beide Eigenschaften. Muss ich irgendwo eine andere Höhe einstellen?

Answer 1

Ich fand das Problem endlich! Hatte mit absolut positionierten Elementen zu tun. Ich benutze benutzerdefinierte Kontrollkästchen, um ein gefülltes Quadrat anstelle der Standardwerte des Browsers zu machen, und ein Teil dieses Codes (den ich geliehen und modifiziert habe) war, die input selbst auf position:absolute zu setzen, was es aus dem normalen Fluss heraus nahm 100vh machte keinen Unterschied). Hinzufügen einfach top: 0 repariert alles. Ich würde es lieben, wenn jemand erklären könnte, warum die Einstellung top auf seinen Standardwert hier einen Unterschied macht.

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