sticky sidebar, setting height right way

Question

This bootstrap grid is working fine,i have two divs in a row. Now i need my reply-container to be fixed(sticky). When i set position: fixed; it is affecting element's width givind some additional width. With position sticky when i set height: 100%; sticky behaviour works good but element is not 100% height, but when i set min-height element is full height but it is not sticky anymore, its just normal element. How can i have sticky div with full height?

<template>
  <div class="container-full">
    <div class="row">
      <div class="col-8">
        <div class="tweets-container">
          <div
            v-for="tweet in tweets"
            :key="tweet.id"
          >
          </div>
        </div>
      </div>
      <div class="reply-container col-4">
        <h1>Replies</h1>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tweets-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.tweet-card {
  background: #fff;
  border-radius: 5px;
  padding: 3px 6px;
  min-height: 125px;
  border: 1px solid #6e6b7b;
}

.reply-container {
  background: #fff;
  position: sticky;
  right: 0;
  top: 0;
  height: 100%;
  /*min-height: 100%;*/
}
</style>

Answer 1

Quikly after posting the question, i solved this with height: 100vh; insted of height: 100%;