오버플로 컨테이너의 플렉스 항목 위로 스크롤할 수 없습니다.라는 제목이 다음과 같이 다시 작성됩니다. 오버플로 컨테이너의 플렉스 항목 위로 스크롤할 수 없습니다.

Question

Flexbox를 사용하여 유용한 모달을 만들려고 시도하는 동안 브라우저 문제로 보이는 것을 발견하고 알려진 수정 사항이나 해결 방법이 있는지 또는 이를 수정하는 방법에 대한 아이디어가 있는지 궁금했습니다.

제가 해결하려는 문제에는 두 가지 측면이 있습니다. 첫째, 모달 창을 수직으로 중앙에 배치하면 예상대로 작동합니다. 두 번째는 모달 창을 스크롤하도록 만드는 것입니다(외부 스크롤). 따라서 모달 창 안의 콘텐츠가 아닌 전체 모달 창이 스크롤됩니다(이 방법을 사용하면 사용자 정의 창처럼 모달 범위를 넘어 확장할 수 있는 드롭다운 메뉴 및 기타 UI 요소를 가질 수 있습니다). 날짜 선택기 잠시만 기다려주세요).

그러나 스크롤 막대와 함께 수직 센터링을 사용하면 모달 상단이 넘치기 시작하여 액세스할 수 없게 될 수 있습니다. 위의 예에서는 오버플로를 강제하기 위해 크기를 조정하며, 이렇게 하면 모달의 아래쪽으로 스크롤할 수 있지만 위쪽으로는 스크롤할 수 없습니다(첫 번째 단락이 잘림).

.modal-container {
  위치: 고정;
  상단: 0;
  왼쪽: 0;
  하단: 0;
  오른쪽: 0;
  배경: rgba(0, 0, 0, 0.5);
  오버플로-x: 자동;
}
.modal-컨테이너 .modal-window {
  표시: -ms-flexbox;
  디스플레이: 플렉스;
  플렉스 방향: 열;
  항목 정렬: 중앙;
  내용 정당화: 센터;
  /* 스크롤 동작을 확인하는 선택적 지원은 IE10에서 의미가 있습니다.
  //-ms-flex-방향: 열;
  //-ms-flex-align: 센터;
  //-ms-flex-pack: 센터; */
  높이: 100%;
}
.modal-컨테이너 .modal-window .modal-content {
  테두리: 1px 실선 #ccc;
  테두리 반경: 4px;
  배경: #fff;
  너비: 100%;
  최대 너비: 500px;
  패딩: 10px
}

    

        

            
Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명의 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum 버전을 포함하는 Aldus PageMaker와 같은 전자 출판 소프트웨어가 출시되면서 대중화되었습니다.
            
Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명의 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum 버전을 포함하는 Aldus PageMaker와 같은 전자 출판 소프트웨어가 출시되면서 대중화되었습니다.
            
Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명의 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum 버전을 포함하는 Aldus PageMaker와 같은 전자 출판 소프트웨어가 출시되면서 대중화되었습니다.
        
    

Answer 1

이 효과를 내기 위해 3개의 용기만 사용했습니다. 비결은 스크롤을 제어하는 ​​컨테이너에서 Flexbox 컨테이너를 분리하는 것입니다. 마지막으로 모든 것을 루트 컨테이너에 넣어 중앙에 배치합니다. 효과를 만드는 데 필요한 주요 스타일은 다음과 같습니다.

으아악 으아악

여기에서 데모를 만들었습니다: https://jsfiddle.net/r5jxtgba/14/

Answer 2

질문

Flexbox를 사용하면 센터링이 매우 쉬워집니다.

플렉스 컨테이너에 align-items: center和justify-content: center만 적용하면 플렉스 항목이 수직 및 수평 중앙에 배치됩니다.

그러나 Flex 항목이 Flex 컨테이너보다 큰 경우 이 접근 방식에는 문제가 있습니다.

질문에서 지적했듯이 플렉스 아이템이 컨테이너를 넘치면 상단에 접근할 수 없게 됩니다.

수평 오버플로가 발생하면 왼쪽 부분(또는 RTL 언어의 오른쪽 부분)에 액세스할 수 없게 됩니다.

다음은 justify-content: center 및 3개의 플렉스 항목을 포함하는 LTR 컨테이너의 예입니다.

이 동작에 대한 설명은 이 답변의 하단을 참조하세요.

---

해결책 #1

이 문제를 해결하려면 대신 flexbox auto-marginsjustify-content을 사용하세요.

여백 auto을 사용하면 오버플로된 플렉스 항목을 해당 항목의 어떤 부분에도 액세스하지 않고 수직 및 수평 중앙에 배치할 수 있습니다.

그러므로 플렉스 컨테이너에는 이 코드를 사용하지 마세요:

으아아아

플렉스 아이템에 이 코드를 사용하세요:

으아아아

수정된 데모

---

해결책 #2(대부분의 브라우저에서는 아직 구현되지 않음)

다음과 같이 키워드 정렬 규칙에 safe 값을 추가하세요.

으아아아

또는

으아아아

CSS 상자 정렬 모듈 사양에서:

참고: 상자 정렬 모듈은 Flex뿐만 아니라 여러 상자 레이아웃 모델에서도 작동합니다. 따라서 위의 사양 발췌에서 대괄호 안의 용어는 실제로 "정렬 본문", "정렬 컨테이너" 및 "start"입니다. 나는 이 특정 문제에 초점을 맞추기 위해 flex 관련 용어를 사용하고 있습니다.

---

MDN의 스크롤 제한 지침: