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

原始布局有一个微妙的问题，其中子弹性框声明（display：flex）是弹性项目的子级（flex：...），而不是在同一元素上定义。这意味着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/

固定弹性框布局中的可滚动区域

1 个答案: