Firefox overflow-y не работает с вложенным flexbox

Я разработал макет 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>
59
css3 firefox flexbox overflow

1 ответов

tl; dr: вам нужно min-height:0 в своем .level-0-row2 правило. (вот codepen с этим исправлением.)

более подробно:

элементы Flex устанавливают минимальный размер по умолчанию, основанный на внутреннем размере их детей (который не учитывает свойства "переполнения" для их детей/потомков).

всякий раз, когда у вас есть элемент overflow: [hidden|scroll|auto] внутри элемента flex, вам нужно дать его предку flex пункт min-width:0 (в горизонтальном контейнер) или min-height:0 (в вертикальном контейнере flex), чтобы отключить это поведение минимального размера, иначе элемент flex откажется сжиматься меньше, чем минимальный размер содержимого ребенка.

см.https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 для более примеров сайтов, которые были укушены этим. (Обратите внимание, что это просто метабуг для отслеживания сайтов, которые были нарушены такого рода проблемой, после того, как этот текст спецификации был реализован-это на самом деле это не ошибка в Firefox.)

вы не увидите этого в Chrome (по крайней мере, на момент публикации), потому что они еще не реализовали это минимальное поведение калибровки. (EDIT: Chrome теперь реализовал это поведение минимального размера, но они все еще могут неправильно свернуть min-размеры до 0 в некоторых случаях.)

140