如何将滚动添加到弹性项目的子项？

Question

使用具有固定高度的 flex 容器，我可以通过设置 overflow: auto 使 flex 项可滚动，如下所示：

page {
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}
left-panel {
  flex: 1;
  display: block;
  background: lightblue;
}
//main {flex: 5; display: block;}
header {
  background: turquoise;
  display: block
}
//main-content-wrapper {flex: 4; display:flex; flex-direction: column}
right-panel {
  flex: 1;
  overflow: auto;
}
content-panel {
  background: pink;
  display: block;
}
content {
  height: 1000px;
  display: block;
}

<page>
  <left-panel>left-panel
    <br/>(static)</left-panel>
  <right-panel>
    <header>
      header
      <br/>(static)
    </header>
    <content-panel>
      <content>
        content
        <br/>(scrolls)
      </content>
    </content-panel>
  </right-panel>
</page>

fiddle

但我想让弹性项目的子项滚动。

我认为在 flex 项目上设置 height: 100% 并在我要滚动的子元素上设置 overflow: auto 会起作用，但它不起作用：

page {
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}
left-panel {
  flex: 1;
  display: block;
  background: lightblue;
}
//main {flex: 5; display: block;}
header {
  background: turquoise;
  display: block
}
//main-content-wrapper {flex: 4; display:flex; flex-direction: column}
right-panel {
  flex: 1;
  height: 100%;
}
content-panel {
  background: pink;
  display: block;
  overflow: auto;
}
content {
  height: 1000px;
  display: block;
}

<page>
  <left-panel>left-panel
    <br/>(static)</left-panel>
  <right-panel>
    <header>
      header
      <br/>(static)
    </header>
    <content-panel>
      <content>content
        <br/>(scrolls)</content>
    </content-panel>
  </right-panel>
</page>

fiddle

我怎样才能做到这一点？

为什么第二把小提琴不起作用？

添加了 OP cmets：

• 我可以看到有几个相关的问题，但我发现的问题要么不直接适用，要么提到可能已经修复的错误的解决方法。

• 我想避免使用显式高度计算来减少组件的耦合。

• 我可以使用flex-direction: column 将右侧面板转换为嵌套的弹性框，但我希望避免这种情况。

• 如果没有明确的高度计算就无法实现扁平结构（如第二把小提琴），最好解释一下原因。会不会被认为是 flexbox 的错误，还是我误解了 CSS 的一些基本原理？

Answer 1

如果您将overflow: auto 应用于一个元素以便它可以启动一个垂直滚动条，那么还要给它一个高度限制。

在这种情况下，您只需将height: 100% 添加到要使其可滚动的元素即可。

content-panel {
  background: pink;
  display: block;
  overflow: auto;
  height: 100%; /* NEW */
}

当然，您需要调整实际百分比值以减去页眉的高度。也许是这样的：

height: calc(100% - 80px)

或者，也许是更好的方法（并且与您添加的拒绝固定高度的 cmets 一致），只需将 right-panel 设为列方向弹性容器：

page {
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}
left-panel {
  flex: 1;
  display: block;
  background: lightblue;
}
header {
  background: turquoise;
  display: block
}
right-panel {
  flex: 1;
  height: 100%;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}
content-panel {
  background: pink;
  overflow: auto;
}
content {
  height: 1000px;
  display: block;
}

<page>
  <left-panel>left-panel
    <br/> (static)</left-panel>
  <right-panel>
    <header>
      header
      <br/>(static)
    </header>
    <content-panel>
      <content>content
        <br/>(scrolls)</content>
    </content-panel>
  </right-panel>
</page>

---

编辑（基于修改后的问题）

关于overflow 属性：

overflow属性指定是否剪辑内容、渲染 滚动条或仅在溢出其块级别时显示内容 容器。

为了使overflow 属性生效，该块 级别容器必须具有边界高度（height 或 max-height) 或将 white-space 设置为 nowrap。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 2

将您的right-panel 设为flexbox 列并将flex:1 添加到content-panel - 请参见下面的演示：

page {
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}
left-panel {
  flex: 1;
  display:block;
  background: lightblue;
}
header {
  background: turquoise;
  display:block;
}
right-panel {
  flex: 1;
  display: flex;/*Added this*/
  flex-direction: column;/*Added this*/
  height: 100%;
}
content-panel {
  background: pink;
  display:block;
  overflow: auto;
  flex:1; /*Added this*/
}
content {
  display: block;
  height: 1000px;
}

<page>
  <left-panel>left-panel
    <br/>(static)</left-panel>
  <right-panel>
    <header>
      header
      <br/>(static)
    </header>
    <content-panel>
      <content>
        content
        <br/>(scrolls)
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
      </content>
    </content-panel>
  </right-panel>
</page>

Answer 3

您的content-panel 已经拥有height 1000px，而您的content 拥有overflow:auto。你唯一错过的是你没有指定content-panelheight。 content-panel height 必须 content height 才能显示滚动条

<content-panel>
    <content>
      content
      </br>(scrolls)
    </content>
</content>