css - 固定 flexbox 布局中的可滚动区域

Question

我正在尝试创建一个固定的(位置:固定的)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/

Answer 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/