body {
overflow: hidden;
margin: 0;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 80px 1fr;
grid-auto-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"Header"
"Body";
}
.Header {
grid-area: Header;
background-color: red;
}
.Body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 60px 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"Tabs"
"Grid";
grid-area: Body;
background-color: green;
}
.Tabs {
grid-area: Tabs;
background-color: pink;
}
.Grid {
grid-area: Grid;
background-color: yellow;
}
<div class="container">
<div class="Header">Header</div>
<div class="Body">
<div class="Tabs">Tabs</div>
<div class="Grid">
<div class="scrollable">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
</div>
</div>
I would like the Yellow part to take the remaining height of the screen but also be scrollable.
0