固定フレックスボックスレイアウト内のスクロール可能領域

Question

固定（位置固定）2列レイアウトを作成しようとしています。 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

元のレイアウトは、子フレキシボックス宣言（表示：フレックス）は微妙な問題があります。むしろ、同じ要素で定義されているよりも、フレックスアイテム（...フレックス）の子供だったが。これは、フレックスボックス宣言自体がフレックスアイテムではなく、レイアウトを壊すことを意味します。

正しいレイアウトが（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/