set height to fit to the container area - html

Question

I have the following setup:
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.appbar {
background-color: blue;
color: white;
}
.sidebar {
flex-grow: 1;
overflow-y: auto;
}
.drawer-container {
height: 100%;
display: flex;
}
.drawer {
position: relative;
background-color: #272b34;
color: lightgray;
border-style: none;
align-self: stretch;
overflow-y: auto;
}
.list {
list-style: none;
padding: 1rem;
}
.drawer-content {
padding: 1rem 1rem 1rem 1rem;
margin-top: 1px;
align-self: stretch;
background-color: #eef5f9;
overflow: auto;
flex: 1 1 auto;
}
.component {
background-color: white;
height: 100%;
box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
overflow: auto;
border-radius: 4px;
}
.header {
padding: 1rem 1rem 1rem;
background-color: #f8f9fa;
}
.grid-container {
margin: 1rem 1rem;
height: calc(100% - 82px);
background-color: red;
}
.grid {
background-color: yellow;
max-height: 100%;
overflow: auto;
}
.grid-content {
height: 500px;
}
<div id="layout" class="layout">
<div id="appbar" class="appbar">
APPBAR
</div>
<div id="sidebar" class="sidebar">
<div id="drawercontainer" class="drawer-container">
<div id="drawer" class="drawer">
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div id="drawercontent" class="drawer-content">
<div id="component" class="component">
<div class="header">HEADER</div>
<div class="grid-container">
<div class="grid">
<div class="grid-content">GRID CONTENT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The question is about this piece of css:
.grid-container {
margin: 1rem 1rem;
height: calc(100% - 82px);
background-color: red;
}
Setting the height like this, I can avoid, that the component element has a scrollbar. It means, the grid-container and the header have a total height of the component. But if I test it with different screen size / pixel ratio, I get a scrollbar (with little scrolling). Note, that the component has to have the property overflow set.
The question is, how can I avoid to set the height this way? How can I avoid the use of pixels or any other units? Basically, I want that the grid-container fills always the remaining area from the component element on any screen sizes / resolutions, without showing any scrollbar, it means not extending it.

Answer 1

Hopefully this snippet does what you want:
Sane default of box-sizing: border-box on every element
Removed stupid margin on the body which caused pagewide scrollbar on 100vh height
Swapped margin on grid-container for padding
Tidied up some shorthands etc. padding: 1rem 1rem 1rem 1rem -> padding: 1rem are the same
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.appbar {
background-color: blue;
color: white;
}
.sidebar {
flex-grow: 1;
overflow-y: auto;
}
.drawer-container {
height: 100%;
display: flex;
}
.drawer {
position: relative;
background-color: #272b34;
color: lightgray;
border-style: none;
align-self: stretch;
overflow-y: auto;
}
.list {
list-style: none;
padding: 1rem;
}
.drawer-content {
padding: 1rem;
margin-top: 1px;
align-self: stretch;
background-color: #eef5f9;
overflow: auto;
flex: 1 1 auto;
}
.component {
height: 100%;
box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
overflow: auto;
border-radius: 4px;
}
.header {
padding: 1rem;
background-color: #f8f9fa;
}
.grid-container {
padding: 1rem;
height: calc(100% - 82px);
}
.grid {
background-color: yellow;
max-height: 100%;
overflow: auto;
}
.grid-content {
height: 500px;
}
<div id="layout" class="layout">
<div id="appbar" class="appbar">
APPBAR
</div>
<div id="sidebar" class="sidebar">
<div id="drawercontainer" class="drawer-container">
<div id="drawer" class="drawer">
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div id="drawercontent" class="drawer-content">
<div id="component" class="component">
<div class="header">HEADER</div>
<div class="grid-container">
<div class="grid">
<div class="grid-content">GRID CONTENT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>