하위 요소가 오버플로되는 것을 허용하면서 Flexbox 콘텐츠 영역을 독립적으로 스크롤하는 방법은 무엇입니까?

콘텐츠가 넘치는 Flexbox 스크롤

문제:

다음 레이아웃을 고려하세요.

[이미지 레이아웃]

콘텐츠 영역이 넘치면 콘텐츠 영역 자체가 아닌 전체 페이지가 스크롤됩니다. 콘텐츠 div에 Overflow: auto를 적용하면 이 문제가 해결되지만 열의 테두리가 잘립니다.

질문:

콘텐츠 영역을 어떻게 할 수 있나요? 자식이 콘텐츠 상자 너머로 확장되도록 허용하면서 독립적으로 스크롤하도록 설정됩니다. 높이?

답변:

Flexbox 사양 작성자인 Tab Atkins에 따르면 다음 접근 방식을 사용할 수 있습니다.

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content;
}

<div class="content">
  <div class="box">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</div>

상자 div에서 min-height를 min-content로 설정하면 열이 콘텐츠 상자 높이를 넘어 확장됩니다. 콘텐츠 영역을 독립적으로 스크롤할 수 있도록 허용합니다. 호환성을 위해 공급업체 접두사가 필요할 수 있습니다.

위 내용은 하위 요소가 오버플로되는 것을 허용하면서 Flexbox 콘텐츠 영역을 독립적으로 스크롤하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!