I'm currently facing an issue with a container that has the overflow-y-scroll CSS property. Inside this container, there's a Bootstrap collapse button that expands to show more content when clicked. The problem arises when the expanded content overflows outside of the container, making it difficult to read and messing up the overall page layout.
So far, I've attempted to set the height of both the collapse feature and its parent div to 100%, but unfortunately, this hasn't resolved the issue. My expectation was that the collapse feature would expand without overflowing outside of the container, allowing users to scroll down to view the entire content.
Below is a representation of the problem I'm encountering.
<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>