I created a CSS grid layout featuring a header, side menu, and scrollable content.
My goal is to test this layout in a container div where I've specified the width and height.
The layout adjusts well according to the container's width, but seems to have trouble with the height. Why is this happening and how can it be resolved?
body {
margin: 0;
}
.container {
width: 70%;
height: 300px; /* How can I set the height? */
}
.page {
width: 100%;
display: grid;
grid-template-rows: 55px calc(100vh - 55px); /* height limitation on second row */
grid-template-columns: 200px auto;
grid-template-areas:
"nav header"
"nav content";
}
.nav {
grid-area: nav;
background-color: aqua;
}
.header {
grid-area: header;
background-color: grey;
}
.content {
grid-area: content;
background-color: red;
overflow-y: auto; /* overflow condition on parent */
}
article {
height: 1000px; /* height set on child; triggers scroll */
}<div class="container">
<div class="page">
<div class="nav">Side menu</div>
<div class="header">Header</div>
<div class="content">
<article>
<!-- New section for content -->
<h1>Title</h1>
<p>A substantial amount of text, emulated by setting .article height to 1000px</p>
</article>
</div>
</div>