两列粘性弹性框滚动不起作用[重复]

Question

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

它应该替换我使用常规网格制作的this solutions，不幸的是我无法再使用了。

你可以在下面看到我目前的进度 - 我真的不知道从这里做什么 - 因为我是一个新手，我希望你们知道。

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