Question

所以我有一个问题，我在另一个具有固定大小的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

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

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

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

1 个答案: