html - 如何向 flex 元素的子项添加滚动条？

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 元素的子项滚动。

我认为在 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 */
}

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

height: calc(100% - 80px)

或者，也许是更好的方法(并且与您添加的拒绝固定高度的评论一致)，只需将 right-panel 设为一列-方向 flex 容器:

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