I'm currently working on making a nested div scrollable, but I'm encountering some challenges. The problematic div in question is the one with the "items" class.
<body>
<div class="page-wrapper">
<div class="header">Header</div>
<div class="content-wrapper">
<div>I am looking to make the following div scrollable:</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
Right now, I'm uncertain about what's causing this issue. I've set the overflow property of items to scroll, thinking that would solve it, but it seems like my assumption was incorrect. Is there a way to achieve the desired scrolling effect for the .items div? If not, could you explain why?