переполнение-й версии Firefox не работает с вложенными основе
Я разработал макет 100% ширины 100% высоты с css3 flexbox, который работает как на IE11 (и, вероятно, на IE10, если эмуляция IE11 правильна).
но Firefox (35.0.1), overflow-y не работает. Как вы можете видеть в этом codepen :
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>1 ответ:
tl; dr: вам нужно
min-height:0в своем.level-0-row2правило. (вот кодовый ключ с этим исправлением.)более подробно:
элементы Flex устанавливают минимальный размер по умолчанию, основанный на внутреннем размере их дочерних элементов (который не учитывает свойства "переполнения" для их дочерних/потомков).
всякий раз, когда у вас есть элемент
overflow: [hidden|scroll|auto]внутри элемента flex, вам нужно дать его предок flex элементmin-width:0(в горизонтальном гибком контейнере) илиmin-height:0(в вертикальном контейнере flex), чтобы отключить это поведение минимального размера, иначе элемент flex откажется сжиматься меньше, чем размер минимального содержимого ребенка.см.https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 для получения дополнительных примеров сайтов, которые были укушены этим. (Обратите внимание, что это всего лишь metabug для отслеживания сайтов, которые были нарушены этой проблемой, после того, как этот текст спецификации был реализован - это на самом деле это не ошибка в Firefox.)
вы не увидите этого в Chrome (по крайней мере, не по состоянию на эту публикацию), потому что они еще не реализовано это минимальное поведение калибровки.(EDIT: Chrome теперь реализовал это поведение минимального размера, но они все еще могут неправильно свернуть min-размеры до 0 в некоторых случаях.)
Comments