오버플로 컨테이너의 플렉스 항목 위로 스크롤할 수 없습니다.라는 제목이 다음과 같이 다시 작성됩니다. 오버플로 컨테이너의 플렉스 항목 위로 스크롤할 수 없습니다.
<p>Flexbox를 사용하여 유용한 모달을 만들려고 시도하는 동안 브라우저 문제로 보이는 것을 발견하고 알려진 수정 사항이나 해결 방법이 있는지 또는 이를 수정하는 방법에 대한 아이디어가 있는지 궁금했습니다. </p>
<p>제가 해결하려는 문제에는 두 가지 측면이 있습니다. 첫째, 모달 창을 수직으로 중앙에 배치하면 예상대로 작동합니다. 두 번째는 모달 창을 스크롤하도록 만드는 것입니다(외부 스크롤). 따라서 모달 창 안의 콘텐츠가 아닌 전체 모달 창이 스크롤됩니다(이 방법을 사용하면 사용자 정의 창처럼 모달 범위를 넘어 확장할 수 있는 드롭다운 메뉴 및 기타 UI 요소를 가질 수 있습니다). 날짜 선택기 잠시만 기다려주세요). </p>
<p>그러나 스크롤 막대와 함께 수직 센터링을 사용하면 모달 상단이 넘치기 시작하여 액세스할 수 없게 될 수 있습니다. 위의 예에서는 오버플로를 강제하기 위해 크기를 조정하며, 이렇게 하면 모달의 아래쪽으로 스크롤할 수 있지만 위쪽으로는 스크롤할 수 없습니다(첫 번째 단락이 잘림).</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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
}</pre>
<pre class="brush:html;toolbar:false;"><div class="modal-container">
<div class="modal-window">
<div class="modal-content">
<p class="p3">Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명의 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum 버전을 포함하는 Aldus PageMaker와 같은 전자 출판 소프트웨어가 출시되면서 대중화되었습니다.</p>
<p class="p3">Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명의 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum 버전을 포함하는 Aldus PageMaker와 같은 전자 출판 소프트웨어가 출시되면서 대중화되었습니다.</p>
<p class="p3">Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명의 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum 버전을 포함하는 Aldus PageMaker와 같은 전자 출판 소프트웨어가 출시되면서 대중화되었습니다.</p>
</div>
</div>
<p><br /></p>
<p>这影响(当前的)Firefox, Safari, Chrome 및 Opera. IE11에 있습니다中进行测试，但假设行为与IE10相匹配。</p>
<p>这是示例代码的链接(고도화)</p>
<p>https://jsfiddle.net/dh9k18k0/2/</p>
