Remove x-axis scrollbar, In bootstrap 5 grid - css

Question

I trying to make layout something like stack overflow in bootstrap 5, I am only using bootstrap grid not using other utilities class (using saas) ,
#import "../node_modules/bootstrap/scss/grid"
This layout consist of fixed header , fixed left sidebar,main content scrollable (in the main content consist of post content etc & footer )
Note in example code I used couple of hepler class, later I will take care of it, It is just for making example code...
Problem in x-axis scrollbar appear (below example code), that is unwanted, This problem need to be fix...
Before ask, I already tried it couple of way, somehow I did not resolve it, If already answer here drop the link and I will delete my question
header{
position:fixed;
top:0;
height: 50px;
background-color: rebeccapurple;
}
#sticky-sidebar {
position:fixed;
height: calc(100vh - 50px);
top: 50px;
max-width: 20%;
background-color: red;
}
main{
min-height: 100vh;
}
footer{
min-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid g-0">
<div class="row">
<header>
<div class="col-md-12">
Header
</div>
</header>
</div>
</div>
<div class="container-fluid g-0">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Menu
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere!
</p>
</main>
<footer style="text-align: center;">
© Footer 2021
</footer>
</div>
</div>
</div>

Answer 1

You should really read the docs since the markup has several problems. Bootstrap 5 beta has the same grid rules as Bootstrap 4...
rows are wrappers for columns. This means only columns should be placed in rows, and columns shouldn't be placed directly in other columns.
g-0 (no gutters) should be on the row, not the container
there is no -xs infix. for example use col-12 not col-xs-12
<header>
<div class="row">
<div class="col-12">Header </div>
</div>
</header>
<div class="container-fluid">
<div class="row g-0">
<div class="col-4">
<div class="row">
<div class="col-12" id="sticky-sidebar"> Menu </div>
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere! </p>
</main>
<footer style="text-align: center;"> © Footer 2021 </footer>
</div>
</div>
</div>
Demo