两列粘性 flexbox 滚动不起作用

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

在粘性元素的父容器上删除 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>

两列粘性 flexbox 滚动不起作用

two-column sticky flexbox scrolling not working

css

sticky

multiple-columns

flexbox