可滚动弹性内容内的可滚动弹性内容

Question

我试图使这个问题尽可能的笼统。本质上，我在另一个垂直伸缩布局中有一个垂直（列）伸缩布局。在外部布局中，我希望主区域（在我的示例中为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 div中添加inner-main，就可以滚动它。请参阅下面的更新的代码段。

.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>