滚动条及其内容隐藏在 div 之外答案

【问题标题】：Scrollbar and its content is hidden outside of div滚动条及其内容隐藏在 div 之外
【发布时间】：2019-04-29 00:20:00
【问题描述】：

所以我遇到了一个问题，我在另一个 div 中有 2 个 div 且大小固定。我两个中的第二个太大而无法放入固定高度的 div，所以我想要一个滚动条出现。但是滚动条超出了内容。我该如何解决？

html:

<div class="main"> 
  <div class="first-child">
    <div class="small-content">
      Content
    </div>
  </div>
  <div class="second-child">
    <div class="large-content">
      Content
    </div>
  </div>
</div>

css:

.main {
  height: 250px;
  overflow: hidden;
}

.first-child {
  background-color: red;
}

.second-child {
  max-height: 100%;
  background-color: blue;
  overflow-y: scroll;
}

.large-content {
  padding-top: 300px;
}

.small-content {
  padding: 10px;

}

https://codepen.io/RilleJ/pen/JeBVpz

我还添加了一个示例来说明我的意思。基本上我希望能够在蓝色框中一直向下滚动并查看内容而无需设置固定高度。（不是说上面的内容，红框，可以是不同的大小）

【问题讨论】：

标签： html css scroll height overflow

【解决方案1】：

使用 flexbox 在子容器之间划分容器空间。
添加 flex-grow: 0 和 flex-shrink: 0 用于只需要为其内容占用空间的子级。
在其他子节点上添加 flex-grow: 1 和 flex-shrink: 1 以平均分配剩余空间（每个子节点将至少占用其内容的大小）。

.main {
  height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.first-child {
  flex-grow: 0;
  flex-shrink: 0;
  background-color: red;
}

.second-child {
  flex-grow: 1;
  flex-shrink: 1;
  background-color: blue;
  overflow-y: scroll;
}

.large-content {
  padding-top: 300px;
}

.small-content {
  padding: 10px;

}

<div class="main"> 
  <div class="first-child">
    <div class="small-content">
      Content
    </div>
  </div>
  <div class="second-child">
    <div class="large-content">
      Content
    </div>
  </div>
</div>

【讨论】：

是的，如果页面加载一次，内容是静态的，这可以解决问题。但正如我最后所说，红色内容可以是动态的，并不总是 38px。