firefox overflow-y не працює з вкладеним flexbox

Question 1

Я розробив макет на 100% по ширині на 100% по висоті за допомогою cbox3 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>

Розгорніть фрагмент

Question 2

tl; dr: вам потрібно min-height:0у своєму .level-0-row2правилі. ( Ось код з цим виправленням .)

Більш детальне пояснення:

Елементи Flex встановлюють мінімальний розмір за замовчуванням, який базується на внутрішньому розмірі їхніх дітей (який не враховує властивості "переповнення" їхніх дітей / нащадків).

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

Щоб отримати додаткові приклади сайтів, яких це покусало, див. Https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 . (Зверніть увагу, що це лише метапомилка для відстеження сайтів, які були порушені подібною проблемою, після впровадження цього специфікаційного тексту - насправді це не помилка у Firefox.)

Ви не побачите цього в Chrome (принаймні, не станом на цю публікацію), оскільки вони ще не реалізували цю мінімальну поведінку розмірів . (РЕДАКТУВАТИ: Chrome тепер реалізував цю поведінку мінімального розміру, але в деяких випадках вони все ще можуть неправильно згорнути мінімальні розміри до 0 ).