如何使父容器的高度设置为固定 px 高度和子内容高度之间的最大值？

Question

如何让父容器满足以下条件：

最大高度为 80vh
高度是以下两者之间的最大值：a) 400px（或任何固定高度）b) 子内容的高度
子内容不能超出父容器
当子内容增长时，它们会一直增长，直到达到父内容的最大高度 80%（然后滚动）

我已经有了 1、3 和 4 的逻辑。但我不确定如何实现第二个条件。这是我写的一些示例代码：

.parent {
  height: 400px;
  width: 80%;
  margin: 100px auto;
  max-height: 80vh;
  border: solid 5px black;
  overflow: scroll;
}

.child {
  border: solid 5px red;
  width: auto;
  height: 550px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

我想我正在寻找类似 height: max(400px, max-content) 的东西。但这是 possible/how 我会实施吗？任何想法将不胜感激！

Answer 1

如果删除父项的高度，父项将从子项获取高度，但不会超过 80vh 这是父项的最大高度，因此如果子项的高度超过 80vh 父级获得剩余高度子级的滚动。

Answer 2

来自MDN：

max-height overrides height, but min-height overrides max-height.

因此，为了确保您的条件 1 始终得到满足（最大高度为 80vh），您不仅需要将 max-height 设置为该值，而且还必须确保如果 400px 大于 80vh，则高度不会不要超过 80vh，否则它会达到 400px 并否决 80vh 的最大高度。

max-height: 80vh;
min-height: min(400px, 80vh);

如何使父容器的高度设置为固定 px 高度和子内容高度之间的最大值？

How to make a parent container have its height set to the maximum value between a fixed px height and child content height?

html

javascript

css

grid

flexbox