I'm currently working on creating a sidebar that occupies a fixed percentage of the viewport. Inside this sidebar, I want to have an element that remains fixed at the top while allowing the rest of the content to scroll if it exceeds the height of the sidebar.
In the scenario outlined here, the h1 element stays at the top of its parent container, causing the content inside .inner to be partially cut off by the height of the h1 element. The question is how can we display all the content and enable scrolling within the inner container?
* { box-sizing: border-box; margin: 0; padding: 0; }
body: {
height: 100vh;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-areas: 'left right';
justify-content: space-around;
grid-gap: 12px;
width: 90vw;
height: 100vh;
margin: auto;
}
.left {
grid-area: left;
}
.right {
gird-area: right
}
.side {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.outer {
height: 90vh;
margin: auto;
position: relative;
border: 1px solid blue;
overflow:hidden;
}
.inner {
height: 100%;
overflow: auto;
}
h1 {
height: 100px;
background: lightgrey;
}
p {
height: 100px;
}<div class="grid-container">
<div class="left">
<div class="side">
<div class="outer">
<h1>other content</h1>
<div class="inner">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
</div>
</div>
<div class="right"></div>
</div>