两列粘性柔性框滚动不起作用

Question

我的flexbox两列设置无法正常工作。基本上，我只希望左栏在向下滚动右栏时保持粘性，然后在完全相同的点结束滚动。它也应该是可折叠的，如下例所示。

它应该取代我使用常规网格制作的解决方案，不幸的是，我无法再使用它了。

你可以在下面看到我目前的进展——我真的不知道该怎么办——因为我是一个新手，我希望你们能知道。

.wrapper {
display: flex;
flex-flow: row wrap;
overflow: auto;
gap: 2em;
justify-content: flex-start;
height: auto;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.aside-1 {
position: -webkit-sticky;
position: sticky;
background: gold;
height: auto;
top: 0;
align-self: flex-start;
}
.aside-2 {
background: hotpink;
height: 900px;
top: 0;
}
@media all and (min-width: 300px) {
.aside { flex: 1 0 0; }
}

<section class="page-width">

<div class="wrapper">
<aside class="aside aside-1"><img width="100%" src="https://cdn.shopify.com/s/files/1/0044/2852/9698/files/242370040_4238706352865614_2798039132201744827_n.jpg"> Aside 1
</aside>
<aside class="aside aside-2">
Aside 2
</aside>
</div>
</section>

我查看了论坛，但没有真正找到我需要的东西，希望有人能帮助我：o(非常感谢！

Answer 1

1. 移除粘性元素父容器上的overflow:auto以使粘性工作

.wrapper {
display: flex;
flex-flow: row wrap;
gap: 2em;
justify-content: flex-start;
height: auto;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.aside-1 {
position: -webkit-sticky;
position: sticky !important;
background: gold;
top: 0 !important;
align-self: flex-start;
}
.aside-2 {
background: hotpink;
height: 900px;
top: 0;
}
@media all and (min-width: 300px) {
.aside { flex: 1 0 0; }
}
.other-content{
margin-top: 2rem;
height: 20rem;
width: 100%;
background: red;
position:sticky;
top:0;
}

<section class="page-width">

<div class="wrapper">
<aside class="aside aside-1"><img width="100%" src="https://cdn.shopify.com/s/files/1/0044/2852/9698/files/242370040_4238706352865614_2798039132201744827_n.jpg"> Aside 1
</aside>
<aside class="aside aside-2">
Aside 2
</aside>
</div>
<div class="divider"></div>
<div class="other-content"></div>
</section>