我有一个容器和一个overflow-y-scroll CSS属性。在它里面，有一个Bootstrap折叠按钮，当点击时会展开并显示额外的内容。然而，当内容展开时，它会溢出容器，使其难以阅读，并且会使页面变得混乱。
我尝试将折叠功能及其父div的高度设置为100%，但这并没有解决这个问题。我希望折叠功能能够扩展而不会溢出容器，这样用户就可以向下滚动以查看整个内容。

• 我遇到的问题的可视化。* x1c 0d1x

<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>