滚动条及其内容隐藏在 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 将容器的 space 划分为 children。
添加 flex-grow: 0 和 flex-shrink: 0 用于 child，只需要为其内容获取 space。
加flex-grow:1，另外child人加flex-shrink:1，把剩下的space平分（每个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>

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

Scrollbar and its content is hidden outside of div

html

css

scroll

height

overflow