Прокручиваемые области в фиксированной макете флекса

Question

Я пытаюсь создать фиксированное (положение: исправлено) расположение в 2 столбца; второй столбец (желтый в примере) должен иметь возможность прокручиваться независимо от первого, а первый имеет вложенный гибкий блок из 3 строк, третий из которых должен быть независимо прокручиваемым (красный в примере).

Я попытался установить переполнение этих div, но он, кажется, игнорируется, и содержимое нельзя прокручивать.

См. Пример ниже и прилагаемый jsFiddle.

<div style="display: flex; flex-flow: column nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch; position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0px;"> 


<div style="order: 0; align-self: auto; flex: 0 1 3em;"> 
    <div style="background: orange;">Announcements</div> 
    </div> 
    <div style="order: 0; align-self: auto; flex: 1 1 auto;"> 
    <div style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch;"> 
     <div style="order: 0; align-self: auto; flex: 1 1 auto;"> 
     <div style="display: flex; flex-flow: column nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch;"> 
      <div style="order: 0; align-self: auto; flex: 0 1 2em;"> 
      <div style="background: rgb(139, 139, 222);">Menu</div> 
      </div> 
      <div style="order: 0; align-self: auto; flex: 1 1 auto;"> 
      <div style="display: flex; flex-flow: column nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch;"> 
       <div style="order: 0; align-self: auto; flex: 0 1 2em;"> 
       <div style="background: green;">SubMenu</div> 
       </div> 
       <div style="order: 0; align-self: auto; flex: 1 1 auto;"> 
       <div style="overflow: auto; background: rgb(224, 71, 71);">Content 
        <div>0</div> 
        ... 
        <div>99</div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div style="order: 0; align-self: auto; flex: 0 1 18em;"> 
     <div style="overflow: auto; background: yellow;">FilterSets 
      <div>0</div> 
      ... 
      <div>99</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/btm5cazr/3/

Answer 1

Оригинальный макет имеет тонкий вопрос, где декларация ребенок Flexbox (дисплей: сгибать) были детьми гибкой позиции (гибкий: ...), а не определяются в том же элементе. Это означает, что объявление flexbox не является гибким элементом, который разбивает макет.

Правильное расположение ниже (с jsFiddle ссылка)

<div style="display: flex; flex-flow: column nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch; position: fixed; top: 0; bottom: 0; right: 0; left: 0;"> 
    <div style="order: 0; align-self: auto; flex: 0 1 3em;"> 
    <div style="background: orange;/* display: none; */">Announcements</div> 
    </div> 
    <div style="order: 0; align-self: auto; flex: 1 1 auto;display: flex; flex-flow: row nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch;"> 
     <div style="order: 0; align-self: auto; flex: 1 1 auto;display: flex; flex-flow: column nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch;"> 
      <div style="order: 0; align-self: auto; flex: 0 1 2em;"> 
      <div style="background: rgb(139, 139, 222);">Menu</div> 
      </div> 
      <div style="order: 0; align-self: auto; flex: 1 1 auto;display: flex; flex-flow: column nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch;"> 
       <div style="order: 0; align-self: auto; flex: 0 1 2em;"> 
       <div style="background: green;">SubMenu</div> 
       </div> 
       <div style="order: 0; align-self: auto; flex: 1 1 auto;overflow: auto;"> 
       <div style="background: rgb(224, 71, 71);">Content 
        <div>0</div> 
        ... 
        <div>99</div> 
       </div> 
       </div> 
      </div> 
     </div> 
     <div style="order: 0; align-self: auto; flex: 0 1 18em;overflow: auto;"> 
     <div style="background: yellow;">FilterSets 
      <div>0</div> 
      ... 
      <div>99</div> 
     </div> 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/btm5cazr/5/