BootStrap 5
Incorporating the following layout:
<div class="row flex-nowrap">
<div class="left">
<!-- leftbar -->
</div>
<div class="main overflow-auto position-relative">
<!-- main site content -->
<div class="modal fade">
<div class="modal-dialog modal-fullscreen">
...
</div>
</div>
</div>
</div>
The main represents the primary content area (with scrolling functionality).
An attempt was made to use a full-screen modal within the main section, aiming for it to be relative to its immediate parent (i.e. main) rather than the viewport.
Due to the .modal element using position:fixed, this goal was not achieved. The following adjustment was tested:
<div class="modal fade position-absolute">
<div class="modal-dialog modal-fullscreen">
...
</div>
</div>
Unfortunately, this modification resulted in a cluttered appearance. Is there a more elegant solution to accomplish the desired outcome?