position sticky is not scrolling full with flexbox

Question

.header,
.footer {
  text-align: center;
  height: 300px;
  background: white;
}

.container {
  display: flex;
  width: 600px;
  margin: 0 auto;
  background: #fafafa;
}

.main {
  flex: 0 0 66.6666%;
  height: 1500px;
}

.sidebar {
  flex: 0 0 33.3333%;
  background: gray;
}

.sidebar__widget {
  position: sticky;
  top: 0;
  background: yellow;
}

.margins {
  padding-top: 30px;
  padding-bottom: 30px;
}

<header class="header">header</header>

<div class="container">
  <div class="main">Main</div>
  
  <aside class="sidebar">
    <div class="sidebar__widget">
      <div class="margins">
        text2
      </div>
      <div class="margins">
        text3
      </div>
      <div class="margins">
        text4
      </div>
      <div class="margins">
        text5
      </div>
    </div>
  </aside>
</div>

<footer class="footer">footer</footer>

is not scrolling to div with text5, only if i scrolled all content after.

also i recorded a video for showing a problem: https://gyazo.com/d5337df7b814c0621ac59c1e85433965

also i tried with display: table, it doesn't work correctly too

Answer 1

Fixed by using this package https://github.com/codecks-io/react-sticky-box and this style

display: flex; align-items: flex-start; for container

Issue resolved