Блог

у меня есть модальный диалог, который сосредоточен на наложении.

Диалоговое окно представляет собой гибкий контейнер с тремя дочерними элементами flex и имеет максимальную высоту 90%.

если высота документа меньше необходимой высоты модального, я хочу, чтобы второй дочерний элемент (modal-body) включал прокрутку.

 <div class="modal">
    <div class="modal-header"><h2>Modal Header</h2></div>
    <div class="modal-body">  <!--this should scroll if modal-height > 90% -->
        <!-- content -->
    </div>
    <div class="modal-controls"><!-- controls --></div>
</div>
  

я понятия не имею, возможно ли это с помощью чистого css.

 .modal {
    position: relative;
    width: 10em;
    max-width: 90%;
    max-height: 90%;
    background-color: green;
    display: flex;
    flex-flow: row wrap;
}
.modal-header { flex: 1 auto; } 
.modal-body {
    flex: 1 auto;
    overflow-y: scroll;
}   
.modal-controls { flex: 1 auto; }
  

Вот основа моего подхода.

Если вы измените размер окна вывода, вы увидите, что модальное диалоговое окно обрезается внизу вместо прокрутки переполнения.

Заранее спасибо.

Это довольно просто. Все, что вам нужно, это заменить

 .modal {
    ...
    flex-flow: row wrap;
}
  

с помощью

 .modal {
    ...
    flex-direction: column;
}
  

И это работает. Не требуется, но вы также должны запретить расширение модального заголовка и модальных элементов управления:

 .modal-header, .modal-controls {
    flex: 0 0 auto;
}
.modal {
    ...
    flex: 1 1 auto;
}
  

Вот рабочий пример