If you want to customize Bootstrap settings, follow these steps:
Start by adjusting the height of the modal within the .modal-dialog class to 100% without the top and bottom margins of 1.75rem.
Next, ensure that the .modal-content, .row, and .col have a height set to 100% to enable overflow inside your div.
To prevent overflow on the page, set it specifically on the .modal-content, with additional overflow:auto activation when no container height is specified.
Lastly, apply overflow-y:hidden to your .modal-body.
Here's an example CSS code snippet to achieve this:
.modal-dialog{
height:calc(100% - 3.5rem);
}
.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}
.modal-body{
overflow-y:hidden;
}
DEMO
body, html { font-size: 10px }
.modal-dialog{
height:calc(100% - 3.5rem);
}
/* ADDED H-100 instead */
/*.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}*/
.modal-body{
overflow-y:hidden;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202776c736c71">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c425c40">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content h-100">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row h-100">
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices ultrices erat et auctor. In hac habitasse platea dictumst. Phasellus et rutrum magna. Fusce m...