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