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

【问题标题】：How to make a parent container have its height set to the maximum value between a fixed px height and child content height?如何使父容器的高度设置为固定 px 高度和子内容高度之间的最大值？
【发布时间】：2021-12-03 08:40:17
【问题描述】：

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

最大高度为 80vh
具有以下最大高度：a) 400 像素（或任何固定高度）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) 这样的东西。但这是可能的/我将如何实现这一点？任何想法将不胜感激！

【问题讨论】：

afak css 规则中没有 OR 选项，你玩过 min-content 和 max-content 吗？ developer.mozilla.org/en-US/docs/Web/CSS/min-content
是的，我的意思是我希望父高度为（400px，最大内容）的最大值。但我不认为我们可以使用这样的最大内容，所以我想知道是否有其他方法来实现相同的逻辑。

标签： javascript html css flexbox grid

【解决方案1】：

如果你删除父级的高度，父级会从子级获取高度，但不会超过80vh，这是父级的最大高度，所以如果子级高度大于80vh，父级会滚动其余身高的孩子。

【讨论】：

对不起，我的意思是当子内容高度是 0px 到 400px 之间的任何高度时，我希望父容器为 400px。所以我希望父容器的高度至少为 400px，除非 400px 大于 80vh（如果我们放大浏览器可能会发生这种情况）
改变高度：400px；最小高度：400px；在父母中
除非 400px 大于 80vh（如果我们放大浏览器可能会发生这种情况）。我认为在这种情况下最好使用响应式 CSS
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

来自MDN：

最大高度覆盖高度，但最小高度覆盖最大高度。

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

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

【讨论】：