오버플로 여유 공간 버그?

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 :`높이의 역할이 무엇

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