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

Я разработал компоновку высот 100% ширины 100% с css3 flexbox, которая работает как на IE11 (и, вероятно, на IE10, если эмуляция IE11 правильная).

Но 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>

Ответ 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. (Обратите внимание, что это всего лишь метагуг для отслеживания сайтов, которые были разбиты на эту проблему, после того, как этот spec-текст был реализован - на самом деле это не ошибка в Firefox.)

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

Ответ 2

простой ответ, добавьте элемент "fireFoxFlexShield", где происходит переполнение. fireFoxFlexShield - это немедленный flex-элемент, тогда вы помещаете переполнение-y: прокрутите до fireFoxFlexShield.

  .textConvBody{
    height: 300px;
    .fireFoxFlexShield{
      overflow-y: scroll;
      height: 100%;  
      .scrollContainer{
        width: 100%;
        max-width: 100%;

      }
    }
  }

но будьте осторожны, потому что это может нарушить стиль, совместимый с Chrome..