Trying to create the following layout using the CSS Grid where only the main element should be scrollable.
<header>header</header>
<div>
<aside></aside>
<main>
</main>
</div>
<footer>footer</footer>
This is a stackblitz: https://stackblitz.com/edit/web-platform-p4nanm?file=index.html,styles.css
And this is the current CSS attempt:
body {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
padding: 0px;
margin: 0px;
}
header {
background-color: gold;
}
div {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
background-color: burlywood;
overflow: hidden;
}
aside {
max-width: 10rem;
}
main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
overflow: auto;
}
footer {
background-color: aqua;
}
p {
background-color: lightgreen;
}
main p {
background-color: gray;
}
The "Weird" thing is that if I add:
overflow: auto;
To the aside element CSS rule, then both the aside and the main element will scroll, and work the way I would expect.
But if the overflow: auto; rule is removed from the aside then most of the content within the main element goes away and it also does not scroll.
How can we make it so that only the main element scrolls?
The solution will be set to aside { min-height: 0; }, because by default it has auto and does not shrink from it. Or any overflow value other than visible.
body {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
padding: 0px;
margin: 0px;
}
header {
background-color: gold;
}
div {
display: grid;
grid-template-columns: auto 1fr;
background-color: burlywood;
overflow: hidden;
}
aside {
max-width: 10rem;
min-height: 0; /* 👈 */
/* overflow: hidden; */ /* ❗ this will work too */
}
main {
display: grid;
overflow: auto;
}
footer {
background-color: aqua;
}
p {
background-color: lightgreen;
}
main p {
background-color: gray;
}<header>header</header>
<div>
<aside>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
</aside>
<main>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
praesentium autem ex nesciunt distinctio earum. Vel, voluptate ratione
illum, placeat quam ullam, debitis iure exercitationem reprehenderit
dignissimos corporis. Distinctio, deleniti?
</p>
</main>
</div>
<footer>footer</footer>