Html 让 Bootstrap 5 模式和背景占据父容器的宽度和高度，而不是全屏

有没有办法限制Bootstrap 5模式对话框和背景的大小？

下面的example占据了example%的屏幕，可以让它只覆盖父main容器吗？

<main class="container-fluid pt-4 px-4" style="height: 400px">
                <!-- Button trigger modal -->
                <button
                    type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#exampleModal"
                >
                    Launch demo modal
                </button>

                <!-- Modal -->
                <div
                    class="modal fade hide"
                    data-backdrop="false"
                    id="exampleModal"
                    tabindex="-1"
                    aria-labelledby="exampleModalLabel"
                    aria-hidden="true"
                >
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5
                                    class="modal-title"
                                    id="exampleModalLabel"
                                >
                                    Modal title
                                </h5>
                                <button
                                    type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                ></button>
                            </div>
                            <div class="modal-body">...</div>
                            <div class="modal-footer">
                                <button
                                    type="button"
                                    class="btn btn-secondary"
                                    data-bs-dismiss="modal"
                                >
                                    Close
                                </button>
                                <button
                                    type="button"
                                    class="btn btn-primary"
                                >
                                    Save changes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>

我添加了下面的css，但不起作用.

.modal-dialog, .modal-backdrop {
/* supposed to take the height and width of parent container */
       height: 100% !important; 
       width: 100% !important;
 }

How it works:

What I want (or expected behavior):