下面是一个我想要实现的测试示例。

这是一个“模板”，用于在不同情境中使用的模态框。
当内容较小时，它应该是屏幕中央的一个小盒子。
当内容较大时（例如长文本），它应该从顶部打开，并让你滚动到底部。

但问题是：它被居中对齐。对于较大内容，它只显示中间部分，顶部和底部会被遮挡在屏幕外。
之所以要这样对齐，是因为这个‘盒子’应该居于屏幕中央；但我并不想让内容在顶部或底部被截断。它应该从顶部打开，并让你滚动到底部，这样就能看到全部内容。
看起来在每一种 'justify-content' 设置下，内容都像被截断一样。

下面的示例应以 "This is heading line 1" 开头，并以一个按钮结尾（此时所有内容都在屏幕上，或者也可以滚动到看见，这也可以）。

更新：我忘记添加包含我的模糊背景的div块。见下方示例。

下面的代码也可以在以下链接查看：
https://codepen.io/kworkspace/pen/ogYNqyo

.w-layout-blockcontainer {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.site-intro-modal {
  z-index: 999;
  color: #2a5d07;
  text-align: justify;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 20px;
  line-height: 30px;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: auto;
}

.modal-bg {
  filter: blur(2px);
  background-color: cornflowerblue;
  background-position: 0 0, 0 0, 0 0;
  background-size: auto, auto, cover;
  width: 100%;
  height: 100%;
}

.modal-container {
  background-color: burlywood;
  border-radius: 30px;
  width: 100%;
  max-width: 35rem;
  padding: 1.8rem;
  position: absolute;
  overflow: auto;
}

.heading {
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 1.375rem;
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.button {
  color: #2a5d07;
  background-color: aliceblue;
  border-radius: 30px;
  padding: .5625rem .9375rem;
  font-size: 1.875rem;
  line-height: 1.875rem;
  position: static;
}

.container {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.paragraph-2 {
  margin-bottom: 1.375rem;
  font-size: 1.875rem;
  line-height: 1.875rem;
}

@media screen and (max-width: 479px) {
  .site-intro-modal {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
  }
}

.modal-container {
  height: auto;
}

<div class="site-intro-modal">
  <div class="modal-bg"><br></div>
  <div class="modal-container">
    <h1 class="heading">This is heading line 1</h1>
    <h1 class="heading">This is heading line 2</h1>
    <h1 class="heading">This is heading line 3</h1>
    <p class="paragraph-2">This is a text to display on all types of screens, such as desktop, tablet, and mobile. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip.</p>
    <p class="paragraph-2">This is a text to display on all types of screens, such as desktop, tablet, and mobile. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip.</p>
    <div class="w-layout-blockcontainer container w-container">
      <a href="#" class="button w-button">Enter site</a>
    </div>
  </div>
</div>

解决方案

要不要只在容器上使用 max-height:100vh（如果你想保留最小边距，可以再小一点？）

请看下面的示例，我在其中使用了 max-height:96vh 和 box-sizing:border-box：

.w-layout-blockcontainer {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.site-intro-modal {
  z-index: 999;
  color: #2a5d07;
  text-align: justify;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 20px;
  line-height: 30px;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: auto;
}

.modal-bg {
  filter: blur(2px);
  background-color: cornflowerblue;
  background-position: 0 0, 0 0, 0 0;
  background-size: auto, auto, cover;
  width: 100%;
  height: 100%;
}

.modal-container {
  background-color: burlywood;
  border-radius: 30px;
  width: 100%;
  max-width: 35rem;
  padding: 1.8rem;
  position: absolute;
  overflow: auto;

  max-height:calc(100vh - 2rem);
  box-sizing: border-box;

}

.heading {
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 1.375rem;
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.button {
  color: #2a5d07;
  background-color: aliceblue;
  border-radius: 30px;
  padding: .5625rem .9375rem;
  font-size: 1.875rem;
  line-height: 1.875rem;
  position: static;
}

.container {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.paragraph-2 {
  margin-bottom: 1.375rem;
  font-size: 1.875rem;
  line-height: 1.875rem;
}

@media screen and (max-width: 479px) {
  .site-intro-modal {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
  }
}

.modal-container {
  height: auto;
}

<div class="site-intro-modal">
  <div class="modal-bg"><br></div>
  <div class="modal-container">
    <h1 class="heading">This is heading line 1</h1>
    <h1 class="heading">This is heading line 2</h1>
    <h1 class="heading">This is heading line 3</h1>
    <p class="paragraph-2">This is a text to display on all types of screens, such as desktop, tablet, and mobile. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip.</p>
    <p class="paragraph-2">This is a text to display on all types of screens, such as desktop, tablet, and mobile. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip.</p>
    <div class="w-layout-blockcontainer container w-container">
      <a href="#" class="button w-button">Enter site</a>
    </div>
  </div>
</div>

你也可以为模态框内容再添加一个额外的包装层，并将其作为滚动容器（在模态框内）：

.w-layout-blockcontainer {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.site-intro-modal {
  z-index: 999;
  color: #2a5d07;
  text-align: justify;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 20px;
  line-height: 30px;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: auto;
}

.modal-bg {
  filter: blur(2px);
  background-color: cornflowerblue;
  background-position: 0 0, 0 0, 0 0;
  background-size: auto, auto, cover;
  width: 100%;
  height: 100%;
}

.modal-container {
  background-color: burlywood;
  border-radius: 30px;
  width: 100%;
  max-width: 35rem;
  padding: 1.8rem 0.9rem;
  position: absolute;
  overflow: auto;
  box-sizing: border-box;
}

.heading {
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 1.375rem;
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.button {
  color: #2a5d07;
  background-color: aliceblue;
  border-radius: 30px;
  padding: .5625rem .9375rem;
  font-size: 1.875rem;
  line-height: 1.875rem;
  position: static;
}

.container {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.paragraph-2 {
  margin-bottom: 1.375rem;
  font-size: 1.875rem;
  line-height: 1.875rem;
}

@media screen and (max-width: 479px) {
  .site-intro-modal {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
  }
}

.modal-container {
  height: auto;
}

.modal-content {
  max-height: calc(96vh - 3.6rem);
  overflow: auto;
  padding: 0 0.9rem;
  box-sizing:border-box;
}

<div class="site-intro-modal">
  <div class="modal-bg"><br></div>
  <div class="modal-container">
    <div class="modal-content">
      <h1 class="heading">This is heading line 1</h1>
      <h1 class="heading">This is heading line 2</h1>
      <h1 class="heading">This is heading line 3</h1>
      <p class="paragraph-2">This is a text to display on all types of screens, such as desktop, tablet, and mobile.
        Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum
        em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj
        hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip.</p>
      <p class="paragraph-2">This is a text to display on all types of screens, such as desktop, tablet, and mobile.
        Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum
        em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj
        hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip.</p>
      <div class="w-layout-blockcontainer container w-container">
        <a href="#" class="button w-button">Enter site</a>
      </div>
    </div>
  </div>
</div>