How to Make an HTML element to Sticky Position using CSS

Question

I would like to make an HTML element to sticky position using CSS property "position: sticky". But I can't understand why it is not working in my code. I have a double column layout where the second column (sidebar) has 2 elements (news1 & news2). I would like to make "news2" fixed when I scroll. Codesandbox Link: https://codesandbox.io/s/kind-glade-jpkg3v?file=/index.html. I also given the code below. Thanks in Advance!

.container {
  width: 600px;
  display: flex;
  margin: 0 auto;
  gap: 20px;
}

.col1 {
  width: 400px;
}

.col2 {
  width: 200px;
}

.article {
  height: 500px;
  background: #efefef;
  padding: 20px;
  margin-bottom: 20px;
}

.news1 {
  background: #efefef;
  padding: 20px;
  margin-bottom: 20px;
  height: 200px;
}

.news2 {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  height: 200px;
  padding: 20px;
  background: #efefef;
}

<div class="container">
  <div class="col1">
    <div class="article">
      <h2>Article One</h2>
    </div>

    <div class="article">
      <h2>Article Two</h2>
    </div>

    <div class="article">
      <h2>Article Three</h2>
    </div>
  </div>

  <div class="col2">
    <div class="sidebar">
      <div class="news1">
        <h3>News One</h3>
      </div>

      <div class="news2">
        <h3>News Two</h3>
      </div>
    </div>
  </div>
</div>

Answer 1

Your .sidebar is limited by the height of its two children .news1 and .news2. Its height needs to be the same as its parent .col2's height:

.sidebar {
    height: 100%;
}

Try it:

.sidebar {
  height: 100%;
}

.container {
  width: 600px;
  display: flex;
  margin: 0 auto;
  gap: 20px;
}

.col1 {
  width: 400px;
}

.col2 {
  width: 200px;
}

.article {
  height: 500px;
  background: #efefef;
  padding: 20px;
  margin-bottom: 20px;
}

.news1 {
  background: #efefef;
  padding: 20px;
  margin-bottom: 20px;
  height: 200px;
}

.news2 {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  height: 200px;
  padding: 20px;
  background: #efefef;
}

<div class="container">
  <div class="col1">
    <div class="article">
      <h2>Article One</h2>
    </div>

    <div class="article">
      <h2>Article Two</h2>
    </div>

    <div class="article">
      <h2>Article Three</h2>
    </div>
  </div>

  <div class="col2">
    <div class="sidebar">
      <div class="news1">
        <h3>News One</h3>
      </div>

      <div class="news2">
        <h3>News Two</h3>
      </div>
    </div>
  </div>
</div>