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

I have a parent container which is flex and has 2 children. One of the is content and the other is sidebar which I want to be sticky. But it is not working. It's not sticky at all. Could you please tell me what I am doing wrong??

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;
}

CodePudding user response：

if you are using flex in the parent element use align-self: flex-start for the element which you want to make sticky.

Apart from that, your element is hidden with 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;
}