전체 높이 Flexbox 애플리케이션에서 수직 스크롤을 어떻게 구현할 수 있습니까?

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

Flexbox는 유연한 레이아웃을 만들기 위한 강력한 메커니즘을 제공합니다. 그러나 전체 높이 애플리케이션과 함께 사용하면 수직 스크롤을 달성하는 것이 어려울 수 있습니다.

이전 솔루션

이전 Flexbox 속성(예: 디스플레이: box)는 레거시 Flexbox 구문을 지원하는 브라우저에 효과적인 것으로 입증되었습니다. 그러나 최신 Flexbox 속성을 사용하는 최신 브라우저의 경우 컨테이너에 height: 0px 설정과 같은 해결 방법이 사용되었지만 바람직하지 않은 부작용이 발생할 수 있습니다.

최적 솔루션

최적 솔루션에는 설정이 포함됩니다. Flexbox 레이아웃 내에서 수직으로 스크롤 가능한 요소의 높이입니다. 높이(또는 최소 높이)를 지정하면 Flexbox는 요소의 높이를 다시 계산하여 필요한 경우 세로 스크롤을 적용하면서 콘텐츠를 수용할 수 있도록 필요에 따라 높이를 늘릴 수 있습니다.

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

이점

이 솔루션:

• Flexbox 내에서 수평 및 수직 유연성을 모두 제공합니다. 레이아웃.
• 추가 해결 방법 없이 필요한 경우에만 세로 스크롤을 보장합니다.
• 최신 브라우저 및 향후 CSS 표준과 완벽하게 호환됩니다.

데모

제공된 JSFiddle의 향상된 버전은 실제 최적의 솔루션을 보여줍니다. http://jsfiddle.net/ch7n6/867/.

위 내용은 전체 높이 Flexbox 애플리케이션에서 수직 스크롤을 어떻게 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!