Solution 1 :

reduce the height of the items class as 100% will display all contents.

Solution 2 :

If you set 100% at your height property from .items class, your <div> tag will expand until all nested items are shown. To enable your scroll , the height of the <div> with class .items must be lower to what it would have if your div expanded to accommodate all nested tags.

Try to set your height property lower than 100% or set in pixels (100px, for instance).

Problem :

I am trying to take a nested div and make it scrollable but I am having some difficulty. The problem child is the div with the class named “items”.

  <div class="page-wrapper">
    <div class="header">Header</div>
    <div class="content-wrapper">
      <div>I want the div below to scroll</div>
      <div class="items">
body {
  height: 100%;
  min-height: 100vh;
  overflow: hidden;

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  height: 100%;
  grid-template-rows: 50px 1fr;

.content-wrapper {
  height: 100%;

.items {
  overflow: scroll;
  height: 100%;
  width: 500px;
  background-color: #fafafa;

.header {
  background-color: orange;

Codepen Link:

I am not sure what is going on. I have set the overflow on items to be scroll, I figured that would do the trick but appears I am wrong. Is there a way to make the .items scroll like this? If not why?


Comment posted by duplicate of this question here

Might be a

Comment posted by allencoded

I see. So I am guessing in order to just have the div end at the bottom of the page I will need to do some kind of calculation via JS?

Comment posted by…

That is a good question. I never tried this before, but I think this thread below can help you achieve what you want.