在容器内创建一个 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;
        }