html - 滚动条及其内容隐藏在 div 之外

Question

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

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

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

Answer 1

• 使用 flexbox 在 child 之间划分容器的空间。
• 为只需要占用其内容所需空间的 child 添加 flex-grow: 0 和 flex-shrink: 0。
• 在其他 child 上添加 flex-grow: 1 和 flex-shrink: 1 以平分剩余空间(每个 child 至少占用其内容的大小)。

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