固定弹性盒布局中的可滚动区域答案

【问题标题】：Scrollable areas in a fixed flex box layout固定弹性盒布局中的可滚动区域
【发布时间】：2016-05-05 09:11:36
【问题描述】：

我正在尝试创建一个固定（位置：固定）的 2 列布局；第二列（示例中为黄色）应允许独立于第一列滚动，并且第一列有 3 行的嵌套 flexbox，其中第三列应可独立滚动（示例中为红色）。

我试过设置这些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/

【问题讨论】：

而不是溢出：自动使用溢出：滚动，它们将变得可滚动
也试过了，可惜没用
jsfiddle.net/ua9kqo29这就是你想要的吧？
真的是@DhavalChheda，是可滚动的还是只有滚动条？
这里是a jsfiddle based on yours，但样式被提取到样式表中，以便于使用

标签： css flexbox

【解决方案1】：

原始布局有一个微妙的问题，即子 flexbox 声明 (display: flex) 是 flex 项 (flex: ...) 的子项，而不是在同一个元素上定义。这意味着 flexbox 声明本身不是一个 flex 项，这会破坏布局。

正确的布局如下（带有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/

【讨论】：