模态高度调整为内容，但模态内容的最大高度变为可滚动

Question

我有一个模式，其中包含可能包含长内容的选项卡。

我想要做的是让模态框在内容高度上调整大小，但是当内容超过模态框最大高度 80% 时，内容部分应该变成可滚动的。

目前，当内容变得太大时，它的工作原理是滚动。但问题是现在 modal__content 容器无论内容如何都保持 100% 的高度。如果我从 modal__content 中删除高度，则内容滚动不再起作用。

希望这是有道理的

    <div class="modal">
        <div class="modal__container">
            <div class="modal__content">
                <div class="modal__left"></div>
                <div class="modal__right>lorem 200 </div>
            </div>
        </div>
    <div>

    <div class="modal-overlay"></div>

CSS

    html, body {
        height: 100%;
    }

    *, ::after, ::before {
        box-sizing: border-box;
    }

    .modal {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        position: fixed;
        left: 0;
        top: 0;
    }

    .modal__container {
        width: 1076px;
        display: flex;
        align-items: center;
        height: calc(100% - 3.5rem);
        margin:1.75rem auto;
    }

    .modal__content {
        background: white;
        display: flex;
        height: 100%;
    }

    .modal__left {
    width: 400px;
    background: #f6f6f6;
    }

    .modal__right {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .modal__inner {
        padding: 2.5rem;
    }

   .modal__body {
        padding: 0 2.5rem;
        height: calc(100% - 5rem);
        overflow-y: scroll;
   }

Answer 1

尝试添加

overflow-y: scroll;   

到 .modal__content

您也可以尝试从以下位置切换高度

height: calc(100% - 3.5rem);

到

height: 100vh;