firefox overflow-y가 중첩 된 flexbox에서 작동하지 않습니다.
IE11에서 모두 작동하는 css3 flexbox로 100 % 너비 100 % 높이 레이아웃을 설계했습니다 (IE11의 에뮬레이션이 올바른 경우 IE10에서 작동).
그러나 Firefox (35.0.1), overflow-y가 작동하지 않습니다. 이 코드 펜에서 볼 수 있듯이 http://codepen.io/anon/pen/NPYVga
firefox가 오버플로를 올바르게 렌더링하지 않습니다. 하나의 스크롤바를 보여줍니다.
html,
body {
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
.level-0-container {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.level-0-row1 {
border: 1px solid black;
box-sizing: border-box;
}
.level-0-row2 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid black;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.level-1-col1 {
width: 20em;
overflow-y: auto;
}
.level-1-col2 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 4px solid blue;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.level-2-row2 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 4px solid red;
box-sizing: border-box;
overflow-y: auto;
}<html>
<body>
<div class="level-0-container">
<div class="level-0-row1">
Header text
</div>
<div class="level-0-row2">
<div class="level-1-col1">
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
</div>
<div class="level-1-col2">
<div class="level-2-row1">
Some text
<p/> Some text 2
<p/> Some text 3
<p/>
</div>
<div class="level-2-row2">
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some test</p>
</div>
</div>
</div>
</div>
</body>
</html>tl; dr : 규칙에 필요 min-height:0합니다 .level-0-row2. ( 여기에 수정 된 코드 펜이 있습니다.)
더 자세한 설명 :
Flex 항목은 자녀의 고유 크기 (자녀 / 하위 항목에 대한 "오버플로"속성을 고려하지 않음)를 기반으로하는 기본 최소 크기를 설정합니다.
Whenever you've got an element with overflow: [hidden|scroll|auto] inside of a flex item, you need to give its ancestor flex item min-width:0 (in a horizontal flex container) or min-height:0 (in a vertical flex container), to disable this min-sizing behavior, or else the flex item will refuse to shrink smaller than the child's min-content size.
See https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 for more examples of sites that have been bitten by this. (Note that this is just a metabug to track sites that were broken by this sort of issue, after this spec-text was implemented -- it's not actually a bug in Firefox.)
You won't see this in Chrome (at least, not as of this posting) because they haven't implemented this minimum sizing behavior yet. (EDIT: Chrome has now implemented this min-sizing behavior, but they may still incorrectly collapse min-sizes to 0 in some cases.)
참고URL : https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
'Programing' 카테고리의 다른 글
| JavaScript 재정의 방법 (0) | 2020.10.26 |
|---|---|
| UIView 블록 기반 애니메이션을 취소하는 방법은 무엇입니까? (0) | 2020.10.26 |
| getActionBar 메소드를 수정하는 방법은 java.lang.NullPointerException을 생성 할 수 있습니다. (0) | 2020.10.26 |
| node_modules를 제외하지 않는 Webpack (0) | 2020.10.26 |
| _CRT_SECURE_NO_DEPRECATE를 통해 생성 된 경고 비활성화 (0) | 2020.10.26 |