オーバーフローした空き領域のバグ？

Question

これはかなり一般的で使い物にならないようなユースケースだと思われますが、私はこれまでに実行していません。私はペンをセットしましたが、そこにそれを複製することはできません。私はなぜ私の髪を引っ張っているのか理解しようとしています。

Demo Pen

左のサイドバーには、項目のリストのカスタムスクロールウィンドウを持っていますが、overflow-y: scrollは私に素敵なスクロール可能なリストを与える設定するものの、それはまた、空白の巨大なブロックを作成し、 overflow-yがスクロールするように設定されていない場合は、左のリストの高さに等しくなります。この空白はHTMLタグの外にあります（その青い背景が停止するため）。だから高さの計算で何かが起こっているように見えますが、他に何ができるか分かりません。

私のアプリでは、コンテンツラッパーのoverflow-yとdisplay: gridの両方をコメントアウトしてみましたが、いずれかを実行すると空白が消えてしまいました。もちろん、私はこれらの両方の特性が必要です。どこか別の高さに設定する必要がありますか？

Answer 1

最後に問題が見つかりました。絶対配置された要素と関係していました。私はカスタムチェックボックスを使ってブラウザのデフォルトの代わりに四角形を行い、そのコードの一部はinput自体をposition:absoluteに設定して、通常のフローから外しました。 100vhは違いはありませんでした）。単にtop: 0を追加するだけですべてが修正されました。誰かがなぜデフォルト値にtopを設定すると違いがあるのか​​説明できるのなら大好きです。

HTML（角）

<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： `section`要素の1000px`：

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