html - 可滚动 flex 内容内的可滚动 flex 内容

Question

我试图让这个问题尽可能通用。本质上，我在另一个垂直 flex 布局中有一个垂直(列) flex 布局。在外部布局中，我希望主要区域(在我的示例中为 outer-main)填充剩余的垂直空间。在内部布局中，我还希望主要区域 (inner-main) 填充剩余的垂直空间。

这在外部布局上工作正常，但在内部布局中，我希望只有主要区域 (inner-main) 可以滚动，而不是整个布局。因此 inner-header 应该始终可见，只有 inner-main 填充剩余空间并可滚动。

如何调整我的 CSS 来实现这一点？

全屏运行时更容易看到代码段

.outer {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  padding: 5px;
}

.outer > div {
  border: 1px solid purple;
  flex: 0 0 auto;
}

.outer .outer-header {
  height: 10vh;
}

.outer .outer-main {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow: auto;
  padding: 5px;
}

.outer .outer-main > div + div,
.outer > div + div {
  margin-top: 5px;
}

.outer .outer-main > div {
  border: 1px solid green;
  flex: 0 0 auto;
}

.outer .outer-main .inner-main {
  flex: 0 1 auto;
}

<div class="outer">
  <div class="outer-header">Outer Header</div>
  <div class="outer-main">
    Outer Main
    <div class="inner-header">Inner Header</div>
    <div class="inner-main">
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
    </div>
  </div>
</div>

Answer 1

好吧，我只需要将 overflow: auto 添加到 inner-main div，这样它就可以滚动了。请参阅下面更新的代码段。

.outer {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  padding: 5px;
}

.outer > div {
  border: 1px solid purple;
  flex: 0 0 auto;
}

.outer .outer-header {
  height: 10vh;
}

.outer .outer-main {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow: auto;
  padding: 5px;
}

.outer .outer-main > div + div,
.outer > div + div {
  margin-top: 5px;
}

.outer .outer-main > div {
  border: 1px solid green;
  flex: 0 0 auto;
}

.outer .outer-main .inner-main {
  flex: 0 1 auto;
  overflow: auto;
}

<div class="outer">
  <div class="outer-header">Outer Header</div>
  <div class="outer-main">
    Outer Main
    <div class="inner-header">Inner Header</div>
    <div class="inner-main">
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
    </div>
  </div>
</div>