How can I have a parent container meets the following conditions:
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!
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);
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.