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

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>