如何向弹性项目的子项添加滚动条？

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

我怎样才能完成这项工作？

为什么第二个 fiddle 不起作用？

已添加 OP 评论：

我可以看到有几个相关问题，但我发现的问题要么不直接适用，要么提到了可能已修复的错误的解决方法。
我想避免使用显式高度计算来减少组件的耦合。
我可以使用 flex-direction: column 将右侧面板转换为嵌套的 flexbox，但我希望避免这种情况。
如果没有明确的高度计算就无法实现平面结构（如第二个 fiddle），最好解释一下原因。它可以被认为是 flexbox 的错误，还是我误解了 css?

Answer 1

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

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

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

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

height: calc(100% - 80px)

或者，也许是更好的方法（并且与您添加的拒绝固定高度的评论一致），只需 right-panel一个 column-direction 弹性容器：

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 属性:

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

In order for the overflow property to have an effect, the block level container must either have a bounding height (height or max-height) or have white-space set to 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-panel height。 content-panel height 必须 < content height 才能显示滚动条

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

如何向弹性项目的子项添加滚动条？

How to add scroll to child of flex item?

html

css

overflow

flexbox

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