reduce the height of the items class as 100% will display all contents.
Solution 1 :
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”.
<body>
<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">
<div>item</div>
...
</div>
</div>
</div>
</body>
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:
https://codepen.io/allencoded/pen/abdmwmQ?editors=1100
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?
Comments
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 stackoverflow.com/questions/30793194/…
That is a good question. I never tried this before, but I think this thread below can help you achieve what you want.