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

Question

使用固定高度的flex容器，我可以通过设置来使flex项可滚动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;
  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>

小提琴

但是我想让flex项目的子项滚动。

我认为可以height: 100%在flex项目和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>

小提琴

我该如何进行这项工作？

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

添加了OP评论：

• 我可以看到有几个相关的问题，但是我发现的问题不是直接适用的，或者是针对自那以后已修复的错误的解决方法。

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

• 我可以使用将右面板转换为嵌套的flexbox 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)

或者，也许是更好的方法（并且与添加的拒绝固定高度的注释保持一致），只需制作right-panel一个列方向的flex容器：

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

height: calc(100% - 80px)

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

关于overflow财产：

该overflow属性指定是在其块级容器溢出时是剪辑内容，渲染滚动条还是仅显示内容。

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow