I am currently implementing a Bootstrap grid with two divs in a row. I need my reply-container to be fixed (sticky). However, when setting position: fixed; it is affecting the element's width by adding some additional width. With position: sticky, setting height: 100%; results in the sticky behavior working well but the element does not reach full height. On the other hand, setting min-height allows the element to be full height but it loses its sticky functionality. How can I achieve a 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>