How can I ensure that the header remains fixed at the top while allowing the content to scroll when hovered over? The current issue is that when a user hovers over the header and tries to scroll, the content does not move.
body {
margin: 0;
}
.wrapper {
width: 60%;
}
.header {
position: fixed;
top: 0;
width: calc(60% - 2em);
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #e5e5e5;
}
.content {
max-height: 300px;
overflow-y: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 3.5em;
}
a.tile {
width: calc(33.333% - 32px);
height: 200px;
margin-bottom: 6px;
padding: 12px;
text-align: center;
border-radius: 12px;
border: 1px solid #efefef;
}<body>
<div class="wrapper">
<div class="header">
<span>9 of 25</span>
<div class="links">
<a href="#" disabled>Previous</a>
<a href="#">Next</a>
</div>
</div>
<div class="content">
<a href="#" class="tile">Tile 1</a>
<a href="#" class="tile">Tile 2</a>
<a href="#" class="tile">Tile 3</a>
<a href="#" class="tile">Tile 4</a>
<a href="#" class="tile">Tile 5</a>
<a href="#" class="tile">Tile 6</a>
<a href="#" class="tile">Tile 7</a>
<a href="#" class="tile">Tile 8</a>
<a href="#" class="tile">Tile 9</a>
</div>
</div>
</body>The example demonstrates how the body will scroll when hovering over the header, but the content div does not. This issue is more commonly observed in full-screen view.