I created a two-column layout (CodePen), where the left column stays fixed, while the right column scrolls. Additionally, these columns wrap into a single column when the browser width is small enough. My problem is once they wrap, the second column keeps its scroll behavior, and the container
scrolls too (so I have a double scroll).
My ideal situation would be that once the right column wraps under the left, the left column joins into the scroll, so there is just one single scroll.
<div class="container">
<div class="left-fixed"></div>
<div class="right-scroll">
<div class="big-content"></div>
</div>
</div>
.container {
background: linear-gradient(0deg, forestgreen 0%, black 100%);
display: flex;
flex-wrap: wrap;
height: 90vh;
padding: 15px;
overflow: auto;
}
.left-fixed {
background-color: lightpink;
flex: 1;
min-width: 400px;
height: 100%;
}
.right-scroll {
flex: 1;
min-width: 400px;
height: 100%;
overflow: auto;
}
.big-content {
height: 3000px;
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
This ideal behavior can be simulated by setting right-scroll
‘s overflow
to visible
once the right column wraps under the left. This will cause the single column to only have a single scroll within container
.
The only thing I can think to do is somehow use javascript to detect when the wrap occurs, and switch the right columns overflow from auto to visible… but this feels clunky.
CodePen