我的粘性侧边栏不是粘性的，这是 flex 的子项，为什么？

Question

我有一个 flex 父容器，它有 2 个子容器。其中一个是内容，另一个是我想要粘性的边栏。但它不起作用。它一点也不粘。你能告诉我我做错了什么吗？？

HTML

<div class="container">
 <div class="side-bar">Side bar</div>
 <div class="content">Content</div>
</div>

CSS

 .container {
  display: flex;
}
.side-bar {
  box-shadow: 0 0 1px grey;
  padding: 1rem 0.4rem;
  align-self: start;
  display: none;
  flex-basis: 14rem;
  margin-right: 0.7rem;
  position:sticky;
  top:1rem;
}

Answer 1

如果您在父元素中使用 flex，请对要设置粘性的元素使用 align-self: flex-start。

除此之外，您的元素已隐藏 display:none。

.side-bar {
  box-shadow: 0 0 1px grey;
  padding: 1rem 0.4rem;
  align-self: flex-start;
  display: none; // --->> remove this line to show the element
  flex-basis: 14rem;
  margin-right: 0.7rem;
  position:sticky;
  top:1rem;
}

我的粘性侧边栏不是粘性的，这是 flex 的子项，为什么？

My sticky side bar is not sticky which is a child of flex, why?

css

sticky

flexbox