CSS - 滚动内容未正确扩展答案

【问题标题】：CSS - scroll content not expanding properlyCSS - 滚动内容未正确扩展
【发布时间】：2017-07-02 04:46:52
【问题描述】：

问题是这样的（https://jsfiddle.net/Lpm2ghsr/4/）

当您滚动时，您可以通过背景颜色看到 .content 的高度在某种程度上与容器的高度相同，而不是扩展到实际内容的高度。

在内容中添加“height: 100%”似乎并不像 100% 那样工作，这意味着我想它的父级高度相同？

我尝试在 .content 中添加“溢出：自动”，但这并不是我真正想要的，因为滚动条应该在外部，如示例所示。

这是 HTML 标记

<header></header>
<div class="container">
  <section class="content">
    <pre>some text
    some text
    some text
    some text
    some text
    some text</pre>
  </section>
</div>

还有 CSS：

body{
  overflow: hidden;
  width: 99%;
  height: 100%;
  min-height: 100%;
  position: absolute;
}
header{
  height: 100px;
  width: 100%;
  background-color: black;
}

.container{
  display: flex;
  overflow: auto;
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
}
.content{
  width: 100%;
  background-color: #bbb;
}

pre{
  width: 100%;
  font-size: 2rem;
}

【问题讨论】：

为什么.container 中有height: calc(100% - 100px)？如果您将其设置为 100%，它应该可以工作。我注意到的另一个问题是你的 section/div 结束标签是错误的。
这个？ jsfiddle.net/Lpm2ghsr/3
@Dana 谢谢，我已经更正了标签。由于标题是 100px hegiht，.container 应该排除那 100px，不是吗？将其设置为 100% 会使滚动条太长以至于它会在底部消失。
@Michael_B 看起来不错！有没有其他变化最小的方法？

标签： html css height scrollbar overflow

【解决方案1】：

我希望这是最简单的方法。试试这个。

您的主要内容在“内容”类中，因此将高度应用于内容类。试试下面的修改代码。

.container{
  display: flex;
  overflow: auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content{
  width: 100%;
  height: calc(100% - 100px);
  background-color: #bbb;
  overflow: auto;
}

【讨论】：

这正是我想要的！谢谢！不过，有一个问题是否溢出：自动；必须应用于.container？
不需要，因为我们已经将容器的高度设置为100%，所以只有内部内容需要溢出。

【解决方案2】：

将 .container 显示更改为阻止 flex 并且它将起作用。

.container {
   display: block;
}

【讨论】：

不幸的是，我必须保留 display: flex 用于其子元素的布局。内容实际上比示例中的要复杂。很抱歉没有在问题中说清楚。