Radio Toggle Buttons in Accordion break scrolling

[shirkrm]

Prerequisites

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

Describe the issue

An accordion with limited height and overflow-y-auto, and a body that extends beyond the window height and includes radio toggle buttons will show scrollbars on both the limited height div and the main window.

Expected: The scrollbar is shown only on the limited height div and not on the main body.

Reduced test cases

https://codepen.io/shirkrm/pen/YzgKeEy

accordion-radio-test.html.txt

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?

5.3.2

[github-actions[bot]]

Hello @shirkrm. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[shirkrm]

https://codepen.io/shirkrm/pen/YzgKeEy

-	-
Bootstrap Version	5.3.2
Browser	Chrome
OS	Windows

[TommasoAllegretti]

Your radio inputs appear to move lower when the first accordion is open causing the main body of the page to show a scrollbar when showing the elements of both accordions.

Setting the desired position of those elements should solve the issue. You can test this by applying the following style to both input tags:

position: absolute;
left: 0;
top: 0;

Hope this is helpful for your case.