I am usng Angular modals, however I noticed that pat of the modals start clipping when the height is reduced. Mainly the header and footer:
Before Resize
After Resize
Note this happens on all the different modals in the examples link:
https://material.angular.io/components/dialog/examples
Expected Behaviour
I expected the header and footer always be visible, while the content starts to shrink.
e.g.
.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;
}<p>Hello World</p>
<div class="backdrop">
<div class="dialog">
<div class="modal-header">
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
<p>Some other text...</p>
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
<p>Some other text...</p>
<p>Some text in the Modal Body</p>
</div>
<div class="modal-header">
<h2>Modal Footer</h2>
</div>
</div>
</div>