How to prevent Bootstrap collapse from overflowing inside an overflow-y-scroll container?

Question

I have a container and an overflow-y-scroll CSS property. Inside it, there's a Bootstrap collapse button that expands and shows additional content when clicked. However, when the content expands, it overflows outside of the container, making it hard to read, and it messes up the page.

I've tried setting the height of the collapse feature and its parent div to 100%, but it didn't solve the issue. I expected the collapse feature to expand without overflowing outside of the container, so that users can scroll down to see the entire content.

A visualization of the issue I'm experiencing.

<div class="container mw-25">
    <div class="text-start text-white px-4">Knowledge Requirements</div>
    <!-- Outer box -->
    <div class="bg-white w-100 h-75 mt-2 mx-3 border rounded-2 rounded-end-0 p-2 overflow-y-scroll">
        <!-- Inner box -->
        <div class="form-check">
            <!-- Checkbox -->
            <input class="form-check-input shadow-none text-start" type="checkbox" value="" id="flexCheckDefault">
                <!-- Collapse button -->
                <a class="btn-sm w-50 text-dark no-hover pb-1 fw-semibold text-decoration-none bg-transparent" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Writing  <span class="badge bg-secondary rounded-pill">Show</span>
                </a>
                <!-- Collapse feature -->
                <div class="collapse" id="collapseExample">
                    <!-- Collapse information-->
                    <label class="p-2 form-check-label border-bottom text-small text-wrap" for="flexCheckDefault">
                        <span class="fw-semibold">A:</span> blurred for privacy reasons
                    </label>
                    <label class="p-2 form-check-label border-bottom text-small text-wrap" for="flexCheckDefault">
                        <span class="fw-semibold">C:</span> blurred for privacy reasons
                    </label>
                </div>

        </div>
        <div class="form-check">
            <!-- Temporary secondary checkbox -->
            <input class="form-check-input shadow-none text-start" type="checkbox" value="" id="flexCheckChecked" checked>
                <label class="form-check-label" for="flexCheckChecked">
                    Checked checkbox
                </label>
        </div>
    </div>

</div>

Answer 1

After dedicating significant effort towards troubleshooting the issue at hand, I have successfully discovered a viable solution. Rather than solely relying on Bootstrap 5, I implemented a custom CSS class with the important tag, and subsequently adjusted the size using the resize function.

height: calc(35vh - 34px) !important;

To ensure that the formatting remains consistent when enclosed, I also adjusted the container style within a specific media width. This approach proved effective in mitigating the problem at hand.