html - 具有高度 % 的 Div 不会通过自动溢出折叠到自身

Question

好吧，这是我第三次寻求有关我在应用程序中处理的特定元素的帮助，因此对于重复我深表歉意。

我正在为应用程序构建问卷，我希望所有问题都包含在一个 div 中并 overflow hidden 部分。我目前遇到的问题是，如果高度不超过窗口大小的 80%，则包含的 div 不会折叠成自身，并且会留下不必要的空白量。

我曾尝试将问卷框高度样式切换为最大高度，但这导致 .questions div 的溢出内容被隐藏而不是可滚动。

我强烈怀疑我可能需要用 js 来处理这个问题，但如果可能的话我更喜欢直接使用 CSS 和 HTML。

有人有什么建议吗？

html, body {
  height: 100%;
 }

.questionnaire-container {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, .1);
}

.questionnaire-box {
  position: relative;
  width: 80%;
  height: 70%;
  margin: 0 auto;
  background-color: #ffffff;
  overflow: hidden;
 }

.questions {
  height: 100%;
  padding: 1rem 2rem;
  overflow-y: auto;
}

<div class="questionnaire-container">
  <div class="questionnaire-box">
    <div class="questions">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</div>

Answer 1

您必须将填充从 .questions 移动到 .questionnaire-box。此外，.questions 不再设置 (...-)width 属性，但是 .questionnaire-box 的 max -width 是 calc(70vh - 2rem)。

fiddle :https://jsfiddle.net/moor131j/2/