Bootstrap dropdown menu inside modal gets cut off at bottom (normal dropdown working fine)

[fungus007]

I'm using a custom multi‑select dropdown inside a Bootstrap modal. The dropdown works fine, but when there are many items, the dropdown menu gets cut off at the bottom of the modal.

It seems the menu is hidden behind the modal boundary. I've tried the fixes recommended in related posts (e.g., boundary settings and CSS overrides), but they didn't work in my case. This issue only affects my custom multi‑select dropdown a standard Bootstrap dropdown inside the same modal renders and behaves correctly.

Here is my Razor markup:

<div class="col-md-6">
    @Html.ValidationMessageFor(model => model.roleIds, "", new { @class = "text-danger small" })
    <label class="form-label fw-bold">Select Roles</label>

    <div class="dropdown w-100 drop-down-downward">
        <button class="btn multi-dropdown w-100 text-start" type="button" data-bs-toggle="dropdown" data-bs-display="static">
            --Choose Roles--
            <span class="dropdown-arrow">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffffff">
                    <path d="M7 10l5 5 5-5H7z"/>
                </svg>
            </span>
        </button>

        <ul class="dropdown-menu multi-dropdown-menu w-100">
            @foreach (var role in Model.roleList)
            {
                <li>
                    <label class="dropdown-item w-100">
                        <input type="checkbox" name="roleIds" value="@role.Value"
                               @(Model.roleIds.Contains(int.Parse(role.Value)) ? "checked" : "") />
                        @role.Text
                    </label>
                </li>
            }
        </ul>
    </div>
</div>

And here is the CSS I tried:

.multi-dropdown {
    background-color: #0d6efd;
    color: #fff;
    border: 1px solid #0d6efd;
    height: 44px;
    line-height: 1.6;
    padding-left: 12px;
    position: relative;
    text-align: left !important;
}

.multi-dropdown .dropdown-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
}

.multi-dropdown:focus,
.multi-dropdown:focus-visible {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.5);
}

.multi-dropdown-menu {
    max-height: 220px;        /* fixed height */
    overflow-y: auto;         /* scroll inside menu */
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
    z-index: 2000 !important; /* above modal */
    position: absolute !important;
}

.multi-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    color: #000;
}

.multi-dropdown-menu .dropdown-item:hover {
    background-color: #0d6efd;
    color: #fff;
}

.drop-down-downward .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    transform: none !important;
}

.modal,
.modal-dialog,
.modal-content {
    overflow: visible !important;
}

Problem:
Even with these fixes, the dropdown menu still gets cut off when it extends beyond the modal bottom.

I want the dropdown menu to either:

1. Show fully outside the modal, OR
2. Scroll properly inside the modal without being clipped

Question

How can I make a custom Bootstrap dropdown menu fully visible inside a Bootstrap modal when there are many items?
Is there a reliable way to fix this overflow issue?