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.
.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.