我有一個嵌套樣式，它的父flex容器有幾個固定高度的元素(flex-grow:0)和一個可變高度的部分(flex-grow:1)?？勺兏叨炔糠智『檬穷愃平M成的垂直柔性盒容器，同樣由幾個固定高度部分和單個可變高度部分組成。我希望可變高度部分填充可用空間，并使用滾動條。

我可以使用flex樣式通過一層flex box子容器來實現(xiàn)這種行為，但是一旦我將父容器的可變高度子容器變成flex box容器本身，那么overflow-y:auto就停止工作了。

我包含了兩個html片段，第一個是工作一級部分， 第二個是非工作布局，模仿我想要實現(xiàn)的最終設計，除了中間的項目不滾動。

任何幫助我需要改變，使這項工作將不勝感激。

工作片段的jsfiddle

<div style="display:flex; flex-direction:column; height:300px">
  <div style="flex-grow:0">
    top flex-grow-0
  </div>

  <div style="flex-grow:1; overflow-y:auto">

    <div style="height:1200px">
      middle flex-grow-1
    </div>

  </div>
  <div style="flex-grow:0">
    bottom flex-grow-0
  </div>
</div>

以及不滾動的兩層代碼片段 非工作代碼段的jsfiddle

<div style="display:flex; flex-direction:column; height:300px">
  <div style="flex-grow:0">
    top flex-grow-0
  </div>

  <div style="display:flex; flex-direction:column; flex-grow:1">

    <div style="flex-grow:1; overflow-y:auto">

      <div style="height:1200px">
        middle flex-grow-1
      </div>

    </div>
  </div>
  <div style="flex-grow:0">
    bottom flex-grow-0
  </div>
</div>