Заголовок и нижний колонтитул диалогового окна Angular Material обрезаются при меньших значениях высоты. ⇐ CSS

[Anonymous]

Я использую модальные окна Angular, однако я заметил, что часть модальных окон начинает обрезаться при уменьшении высоты. В основном верхний и нижний колонтитулы:
Текущее поведение
До изменения размера


После изменения размера< /p>


Обратите внимание на это происходит на всех различных модальных окнах в ссылке примеров:
https://material.angular.io/comComponen ... g/examples
Ожидаемое поведение
Я ожидал, что верхний и нижний колонтитулы всегда будут видны, а содержимое начнет уменьшаться.
например,
Перед изменением размера< /strong>


После изменения размера


https://codepen.io/yahya_uddin/pen/qBGrPpp

Код: Выделить всё

.backdrop {
position: fixed;
background: rgba(0,0,0, 0.4);
left: 0;
top: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.dialog {
background: white;
max-height: calc(100% - 32px);
overflow: hidden;
border-radius: 8px;
display: flex;
flex-direction: column;
}

.modal-header {
background: red;
padding: 12px;

h2 {
margin: 0;
}
}

.modal-body {
padding: 8px;
overflow: auto;
flex: 1;
}

Код: Выделить всё

Hello World



Modal Header

Some text in the Modal Body
Some other text...
Some other text...
Some text in the Modal Body
Some other text...
Some other text...
Some text in the Modal Body

Modal Footer

Подробнее здесь: https://stackoverflow.com/questions/785 ... ght-values