전체 높이 Flexbox 앱에서 세로 스크롤을 활성화하는 방법은 무엇입니까?

전체 높이 애플리케이션에서 Flexbox와 세로 스크롤 결합

문제:

다음을 사용하여 전체 높이 앱 레이아웃 만들기 수직을 활성화하는 동안 Flexbox

토론:

최신 Flexbox 속성을 사용하면 전체 높이의 앱 레이아웃을 구현할 수 있습니다. 그러나 세로 스크롤을 추가하는 것은 어려울 수 있습니다.

오래된 Flexbox 레이아웃(예: 디스플레이: 상자)을 사용하는 초기 접근 방식은 해당 이전 버전만 지원하는 브라우저에서 실행 가능합니다.

이 문제를 해결하려면 문제에서는 컨테이너 높이를 0px로 설정하는 해킹이 제안되었습니다. 이 해결 방법으로 스크롤 문제는 해결되지만 새로운 문제가 발생합니다.

해결책:

이상적인 해결 방법은 Flexbox 레이아웃 내에서 스크롤 가능한 요소의 높이를 설정하는 것입니다. 기본적으로 Flexbox는 해당 요소의 높이를 계산하므로 높이가 0px이면 세로 스크롤이 효과적으로 활성화됩니다.

최소 높이를 원하는 경우 min-height를 대신 사용할 수 있습니다(예: min-height: 100px). .

코드 예:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px; /* or min-height: 100px */
}

이것은 이 접근 방식은 flexbox가 동적으로 다시 계산할 수 있도록 하면서 스크롤 가능한 요소에 높이가 있도록 보장합니다.

업데이트된 Fiddle:

[업데이트된 JSFiddle](http://jsfiddle.net /ch7n6/867/)은 최종 솔루션을 보여줍니다.

위 내용은 전체 높이 Flexbox 앱에서 세로 스크롤을 활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!