I am facing a challenge with my grid layout where the children's content needs to be scrollable. The grid is sandwiched between a header and footer, as illustrated below:
<div class="app">
<div class="header">
Header
</div>
<div class="grid">
<div class="first card">
<div>
Card Header
</div>
<div class="content">
...
</div>
</div>
<div class="second card">
<div>
Card Header
</div>
<div class="content">
...
</div>
</div>
<div class="third card">
<div>
Card Header
</div>
<div class="content">
...
</div>
</div>
</div>
<div class="footer">
Footer
</div>
</div>
I want to make sure that the grid does not exceed the viewport size. The footer should always stay visible, and I don't want the main viewport to have a scrollbar (only the individual card contents should scroll).
Currently, I have set the overflow property to auto for the contents:
.content {
overflow-y: auto;
}
However, the only way I can get them to scroll is by setting a fixed height or max-height, which I do not want. I want the content to take up space without causing the main viewport to require scrolling. I've tried adjusting the max-height but haven't found a solution yet. You can view my code in this fiddle:
https://jsfiddle.net/ja94t0m0/39/
In the current setup, the footer is slightly misplaced, and the grid items extend beyond it. I am seeking assistance in fixing both of these issues.