Неожиданный размер для дочернего элемента гибкого элемента

Question

Я хочу построить компоновку столбцов с помощью меню, затем заголовка, а затем контейнера содержимого, использующего flexboxes.

Я знаю, как построить его в других техниках, используя фиксированные размеры, вычитание и т. Д. Но есть проблемы с flexboxes.

Вот JsFiddle

У меня есть это:

<div class="layout"> 
    <div class="menu"> 
    Menu 
    </div> 
    <div class="header"> 
    Header 
    </div> 
    <div class="content"> 
    <div class="scrollable-content"> 
     ... 
    </div> 
    </div> 
</div> 

---

.layout { 
    overflow: hidden; 
    border: solid; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.menu { 
    overflow: hidden; 
    border: solid red; 
    flex-grow: 0; 
    flex-shrink: 0; 
} 

.header { 
    overflow: hidden; 
    border: solid green; 
    flex-grow: 0; 
    flex-shrink: 0; 
} 

.content { 
    overflow: hidden; 
    border: solid blue; 
    flex-grow: 1; 
    flex-shrink: 1; 
} 

.scrollable-content { 
    overflow: auto; 
    height: 100%; 
    width: 100%; 
} 

---

Как вы можете видеть на JsFiddle, с этим кодом, то .scrollable-content не на самом деле никогда не прокручивать , потому что даже при использовании height: 100% он становится намного больше, чем его родительский div. Как я могу ограничить высоту div высотой родителя?

Примечание: Я знаю, что я мог бы поставить overflow: auto родителю .content напрямую, но по причинам, характерных для моего приложения я действительно не хочу: пожалуйста, только представить решения, которые не изменяют структуру HTML или изменяющие прокручиваемый контейнер, потому что я уже знаю эти решения. Меня больше интересует, чтобы узнать, почему мой подход не работает, и как это можно исправить (или нет?)

Очевидно, что содержание, которое можно прокручивать имеет динамическую высоту и не фиксированное значение 450px как в моем JsFiddle.

Answer 1

Вы можете удалить height: 100% из .scrollable-content, а затем изменить display из .content в flex:

Updated Example

.content { 
    overflow: hidden; 
    border: solid blue; 
    flex-grow: 1; 
    flex-shrink: 1; 
    display: flex; 
} 

.scrollable-content { 
    overflow: auto; 
    width: 100%; 
} 

Answer 2

Вам не хватает height: 100% на .content.

Поскольку вы используете процентные высоты, вам нужно указать высоту для всех родительских элементов .scrollable-content.

Для более подробного пояснения см: Working with the CSS height property and percentage values

Answer 3

Вы почти там.

.content { 
     overflow: hidden; 
     border: solid blue; 
     flex-grow: 1; 
     flex-shrink: 1; 
     height:450px; //adjust accordingly. 
    } 

Прокрутка активируется, как только высота достигла ограниченной высоты. В вашем случае, поскольку у вас есть область прокрутки, ограниченная высотой родительского (контента), вы сделали это правильно, указав ее высоту: 100% .... но .... 100% чего?

Итак, все, что вам нужно, это дать классу контента точку остановки. измените 450px на то, что более подходит. Если вы пытаетесь покрыть пробел ниже этого содержания, тогда следующий элемент должен быть расположен как абсолютное дно. (Только в случае, если это то, что вы зафиксируете, чтобы добраться до) Я видел этот подход много раз, и это, как правило, что следует :)

Вот ваш обновленный jfiddle