代码之家 › 专栏 › 技术社区 › Matt Anxo P

可滚动弯曲内容中的可滚动弯曲内容

flexbox css3 css html

Matt Anxo P · 技术社区 · 6 年前

outer-main ,在我的示例中)来填充剩余的垂直不动产。在内部布局上,我也喜欢主区域( inner-main )以填补剩余的垂直房地产。

这是工作正常的外部布局,但在内部布局,我想只是主要领域( 内干管 inner-header 应该始终可见,只需 内干管 填充剩余空间并可滚动。

如何调整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>

1 回复 | 直到 6 年前

Matt Anxo P 6 年前

好吧,我只需要补充一下 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>