在容器内制作一个 div 以自动调整大小

Question

>我有一个容器，里面有 3 个 .前 2 个内容不大。我通过单击按钮显示和隐藏第一个(我正在使用 Angular(。第二个具有静态内容。我不想为容器使用滚动轴。我只需要第三个div来滚动，它的内容很大。当我通过按钮单击显示我的第一个div 后使我的容器overflow: hidden;时，我的第三个div 的一部分没有显示。第三个有这个高度height: 100vh;.我是CSS和HTML的新手，我该如何解决这个问题？

<div class="container">
  <div *ngIf="showContent" class="1st-content"></div>
  <div class="2nd-content"></div>
  <div class="3rd-content"></div>
</div>

这是我的 CSS。

.container {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.3rd-content {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

Answer 1

将其用于解决方案。

body, html {
          padding: 0;
          margin: 0;
        }
.container {
          overflow: hidden;
          height: 100vh;
          width: 100%;
        }
.third-content {
          width: 100%;
          height: 100vh;
          overflow-y: scroll;
          box-sizing: border-box;
        }