How to make a parent container have its height set to the maximum value between a fixed px height an-CodePudding

How can I have a parent container meets the following conditions:

has a max-height of 80vh
has a height that is the maximum between: a) 400px (or any fixed height) b) height of child contents
child contents cannot extend past parent container
when the child contents grow, they keep growing until it hits the parent's max height of 80% (and then it scrolls)

I already have logic for 1, 3 and 4. but im not sure about how to implement the second condition. Here is some sample code i wrote:

.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>

I think I am looking for something like height: max(400px, max-content). But is this possible/how would I implement this? Any ideas would be greatly appreciated!

CodePudding user response：

If you delete the height of parent, the parent going to take the height from child but no more for 80vh that is the max height for parent, so if the child height is more than 80vh the parent get scroll for the rest height child.

CodePudding user response：

From MDN:

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

So to make sure your condition 1 is always definitely met (maximum height of 80vh) you not only have to set max-height to that but you have to make sure that if 400px is greater than 80vh that the height does not go above 80vh, otherwise it will go to 400px and overrule the max height of 80vh.

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