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