Scrollable modal may clip overflowing elements on the left

[Zannick]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I am testing behavior of some modals that may have horizontal lists, whether actual horizontal list-groups (as in the repro case below) or a non-wrapping flex div of buttons. I'm using justify-content-center on the list-group/list element, which makes the list centered.

When the modal is too small, I expected a) the list to be still centered initially, and b) the modal to be scrollable to the sides to see the overflowing content.

What actually happens: a) the list is still centered ✔, but b) the modal can only be scrolled to the right, but not to the left ❌
(Alternatively, if a) the list was not centered ❌, but b) the modal could be scrolled to the overflowing content (to the right) ✔, this would be partially acceptable, because then the scroll problem can be solved with javascript. But prefer if bootstrap did that automatically.)

Reduced test cases

<div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-body">
        <ul class="list-group list-group-horizontal justify-content-center">
          <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
          <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
          <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
          <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
          <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
        </ul>
      </div>
    </div>
  </div>

.list-group-item-action {
  min-width: 150px !important;
}

Removing justify-content-center doesn't scroll to the modal margin but starts with the correct margin on the left:

The only good workaround I've found is to put min-width: fit-content on an element inside the body, which has to be on a wrapper element if I have multiple lists or the lists won't all be centered:

All these examples are in https://codepen.io/Zannick/pen/pvbNOGG

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.7

[vickyyadav25082000-web]

Use

[mdo]

I don't think this is a Bootstrap bug, but rather a problem with how the browser decides to handle scrolling. I'm not sure what we'd be able to do for you here.

[Zannick]

It's unwanted behavior to have the element overflow to the left, and all I've done is use Bootstrap classes as suggested in the docs (well, combining a list-group with a modal). I figure there's a better fix that could be applied to modal-body or some other class (whether directly or by adding another class) that would more properly constrain the elements inside it (and not assume an empty or undefined width). If not, and the workaround I offer is the intended option, then I'll suggest adding it to the docs.