CSS "max-height" 只工作 1 层深吗？如果是这样，如何自动滚动嵌套的 Web 布局？

Question

我正在努力解决 CSS 中似乎应该是初学者的任务：滚动和高度（当元素的嵌套深度超过 1 层时）。

我想设计默认元素不会扩展到其 parent 元素之外的布局，如果扩展超过 overflow: auto 元素，它们就会开始滚动。

我不想在每个元素上都设置 height; 100%，因为我需要元素只占用所需的 space，所以一直在尝试使用 max-height: 100% 或 max-height: inherit 每个元素。

当使用 height: 100% 时，parent 的高度被正确拾取，即使元素嵌套了好几层，如下所示：Code Pen 1

html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  height: 95vh;
  background-color: red;
  overflow: hidden;
}

.levelOne {
  background-color: blue;
  height: 100%;
  /* Correctly gets parent height */
}

.levelTwo {
  background-color: green;
  overflow: auto;
  height: 100%;
  /* Correctly gets grand-parent height */
}

<div class="levelOne">
  <div class=levelTwo>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
  </div>
</div>

然而，当尝试不使用 max-height: 100% 溢出嵌套的 div 时，级别 1 child 似乎正确地停在了 parent 高度，但是级别2 child 会溢出来。 Code Pen 2

*,
*:before,
*:after {
  box-sizing: inherit;
  max-height: inherit;
  overflow: hidden;
}

html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  height: 95vh;
  background-color: red;
  overflow: hidden;
}

.levelOne {
  background-color: blue;
  max-height: 100%;
  /* Correctly gets parent height*/
}

.levelTwo {
  background-color: green;
  overflow: auto;
  max-height: 100%;
  /* DOESN'T get grandparent hight, but spills out of levelOne so overflow: auto never starts to scroll; */
}

<div class="levelOne">
  <div class=levelTwo>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
    <p>Lorem</p>
  </div>
</div>

为什么 max-height: 100% 没有达到 grandparent 的高度，而 `height: 100%' 可以？我会预料到类似的行为。
是否有更好的方法来防止元素超出其 parent 大小？

我也看到了做类似下面的事情的建议，但是如果 max-hight 无法计算超过第一层深度，它也会失败：

*, *:before, *:after {
    box-sizing: inherit;
    max-height: inherit;
    overflow: hidden;
}

出于某种原因，如果 div 是 1x1 css 网格，那么在更深层次上事情会更一致，但有时网格开销太大，我希望更好地了解基础知识。

谢谢。

Answer 1

I need elements to only take up the space required

设置相对于 parent 的宽度不会使元素仅占用所需的 space。默认情况下 height 设置为 auto 这只会使元素达到所需的高度。

Stop levelTwo from overflowing levelOne & universally tell all elements to never expand beyond their parent

决定您的 children 在它们太大而无法适应其明确高度时将做什么 parent:

明显溢出（默认）
隐藏（错误做法）
滚动

Why does max-height: 100% not top out at the grandparent's height, while height: 100% does? I would have expected similar behavior.

Why setting height: 100% on each works, but max-height: 100% does not

MDN - 百分比是根据生成框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则百分比值被视为 none.

所以因为你的 levelOne 容器有一个 max-height 而不是一个高度，最大高度被视为 100% 的自动 - 而 100% 的“你需要的”是 max-height none.

Is there a better method to not allow elements to spill out of their parent sizes?

请让我知道这个示例是否符合您的要求。

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 95vh;
  background-color: red;
}

.levelOne {
  background-color: blue;
  max-height: 100%;
  /* Correctly gets parent height*/
  overflow: auto;
}

.levelTwo {
  background-color: green;
}

<div class="levelOne">
  <div class=levelTwo>
    <p>Lorem</p>
    <p>Lorem</p>
  </div>
</div>

levelOne 将根据默认 CSS 高度值 auto 的内容来调整大小。由于 overflow: auto.

，它将在其 parent 高度的 100% 处达到最大高度并在内容超过此高度时滚动

CSS "max-height" 只工作 1 层深吗？如果是这样，如何自动滚动嵌套的 Web 布局？

Does CSS "max-height" Only Work 1 Level Deep? How to Automatically Scroll Nested Web Layouts if so?

html

css

scroll

responsive