How to remove weird right margin of overflow-y: auto - html

Question

So I've been trying to add a vertical scroll into my modal. It was a half-success.
The CSS and all are working fine but I'm having this weird margin-right that seems like can't be removed.
I tried to play around with the inspect element and nothing is working.
By the way, when I removed the overflow-y: auto the layout is okay (ofc, can't be scrolled)
So in my conclusion, the CSS overflow-y: auto is the one that creates that weird margin-right.
Can someone help me or explain this to me and How to remove it?
See the images attached for details.
PS. I think no need to post the code here since it's just CSS
/* View Menu-Modal */
.modalMenu {
float: none;
width: 100%;
height: 200px;
}
.modalMenu-img {
width: 100%;
height:100%;
object-fit:cover;
border-radius: 8px;
}
.modalPrice {
font-size: 24px;
line-height: 28px;
margin: 0px;
font-family: 'Barlow', sans-serif;
}
.modal-dialog {
height: 100% !important;
}
.modal-header {
border-bottom: 0px !important;
}
.modal-content {
border: 0px !important;
height: auto;
min-height: 80%;
border-radius: 12px;
}
.modal-body {
height: 70vh;
overflow-y: auto;
/*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
margin-right: 0px !important;
}
.modal-footer {
border-top: 0px !important;
}
#view-menu-modal::-webkit-scrollbar {
display:none
}
<!-- Modal -->
<div class="modal fade" id="viewMenuModal<?= $menu_id ?>" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
<div class="modalMenu mb-2">
<img class="modalMenu-img" src="images/img/stock/baby-back-ribs.jpeg" alt="blog-img">
</div>
<div class="content-right">
<h3><?= $menu_name ?></h3>
<p class="food-description"><?= $menu_desc ?></p>
<p class="modalPrice">₱ <?= $menu_price ?> </p>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-lg primary-btnLink mb-1">Add to Order</button>
<button type="button" class="btn btn-lg secondary-ghostBtn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>
This is the screenshot of the weird right-margin produced by the overflow-y: auto
See how it looks like
And this is the elements panel, weird that there's no right-margin value.
Weird margin-right
Full Inspect Element Panel

Answer 1

If you want to say that you have added a vertical scrollbar but it automatically overflows in the x-axis. Then add this property also overflow-x: hidden it will remove spaces on the right side or will remove the horizontally scrollbar.

Answer 2

Try setting the overflow-y to overlay. This should make the scrollbar appear only as an overlay, thus not affecting the width of your element!
.modal-body{
overflow-y: overlay;
}

Answer 3

You can use overflow-y: scroll; on your modal body. I changed your height to 200px to demonstrate. Also, for the margin, try just margin-right: 0; instead of scroll-margin-right
/* View Menu-Modal */
.modalMenu {
float: none;
width: 100%;
height: 200px;
}
.modalMenu-img {
width: 100%;
height:100%;
object-fit:cover;
border-radius: 8px;
}
.modalPrice {
font-size: 24px;
line-height: 28px;
margin: 0px;
font-family: 'Barlow', sans-serif;
}
.modal-dialog {
height: 100% !important;
}
.modal-header {
border-bottom: 0px !important;
}
.modal-content {
border: 0px !important;
height: auto;
min-height: 80%;
border-radius: 12px;
}
.modal-body {
/*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
height: 200px;
margin-right: 0px !important;
overflow: scroll;
}
.modal-footer {
border-top: 0px !important;
}
<!-- Modal -->
<div class="modal fade" id="viewMenuModal<?= $menu_id ?>" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
<div class="modalMenu mb-2">
<img class="modalMenu-img" src="images/img/stock/baby-back-ribs.jpeg" alt="blog-img">
</div>
<div class="content-right">
<h3><?= $menu_name ?></h3>
<p class="food-description"><?= $menu_desc ?></p>
<p class="modalPrice">₱ <?= $menu_price ?> </p>
<p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-lg primary-btnLink mb-1">Add to Order</button>
<button type="button" class="btn btn-lg secondary-ghostBtn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>

Answer 4

in this your code working fine,if possible use bootstrap css and js
.modalMenu {
float: none;
width: 100%;
height: 200px;
}
.modalMenu-img {
width: 100%;
height:100%;
object-fit:cover;
border-radius: 8px;
}
.modalPrice {
font-size: 24px;
line-height: 28px;
margin: 0px;
font-family: 'Barlow', sans-serif;
}
.modal-dialog {
height: 100% !important;
}
.modal-header {
border-bottom: 0px !important;
}
.modal-content {
border: 0px !important;
height: auto;
min-height: 80%;
border-radius: 12px;
}
.modal-body {
height: 70vh;
overflow-y: auto;
/*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
margin-right: 0px !important;
}
.modal-footer {
border-top: 0px !important;
}
#view-menu-modal::-webkit-scrollbar {
/*display:none*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#viewMenuModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="viewMenuModal" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
<div class="modalMenu mb-2">
<img class="modalMenu-img" src="https://image.freepik.com/free-psd/fast-food-concept-banner-template_23-2148777964.jpg" alt="blog-img">
</div>
<div class="content-right">
<h3><?= $menu_name ?></h3>
<p class="food-description"><?= $menu_desc ?></p>
<p class="modalPrice">₱ <?= $menu_price ?> </p>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-lg primary-btnLink mb-1">Add to Order</button>
<button type="button" class="btn btn-lg secondary-ghostBtn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>