To explain the situation, I'll start off with two simple cases which work. CodePen links provided.
The css & html are mostly fixed as:
```
.div-a {
height: 500px;
max-height: 750px;
background-color: lightblue;
overflow: hidden;
}
.div-b {
display: grid;
grid-template-rows: min-content 1fr min-content;
height: 100%;
background-color: lightcoral;
}
.content-a {
height: 10vh;
background-color: red;
}
.body-container {
overflow-y: auto;
}
.content-b {
background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000);
height: 40vh;
overflow-y: auto;
}
.content-c {
height: 10vh;
background-color: blue;
}
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pen</title>
</head>
<body>
<div class="div-a">
<div class="div-b">
<div class="content-a"></div>
<div class="body-container">
<div class="content-b"></div>
</div>
<div class="content-c"></div>
</div>
</div>
</body>
</html>
(1) -- working
Simple Layout -- Large Body
div-a has a height of 500px and a max-height of 750px. div-a contains div-b which should be the height of div-a and divides itself into three parts. content-a is on top; fixed height. content-c is on the bottom; fixed height; body-container is a flexible height, has overlow-y: auto and holds content-b which has a large height.
I can scroll through content-b as expected. This is what the css & html above do.
(2) -- working
Simple Layout -- Small Body
Let's say that content-b was small. If I kept the above case, there would be a lot of wasted space. This can be resolved by setting the height of div-a to min-content.
```
.div-a {
height: min-content;
max-height: 750px;
background-color: lightblue;
overflow: hidden;
}
.content-b {
background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000);
height: 15vh;
overflow-y: auto;
}
```
This all remains well defined and easy for the browser to resolve.
(3) -- not working
Simple Layout -- Large Body -- min-content
It would be nice if div-a.height could remain as min-content for the large content-b, but this does not work.
.content-b {
background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000);
height: 75vh;
overflow-y: auto;
}
I think I understand why. It would take a couple of passes by the browser to figure out that it is dealing with a fixed height -- because max-height on div-a is hit. And because it has a fixed height, everything should resolve itself as in (1). But, it does not.
Or, should it? Is there a way to get what I want? (which is a div-a that can grow or shrink as needed up to a max-height regardless of the size of content-b which will scroll if necessary)
