CSS not being applied on Angular application - html

Question

I have a Modal service which HTML/CSS is working fine (StackBlitz Angular Static HTML)
div.cover {
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 200;
}
div.modal {
background-color: white;
display: flex;
flex-direction: column;
max-height: 60vh;
max-width: 400px;
width: 100%;
}
div.head {
align-items: center;
background-color: white;
border-bottom: 1px solid gray;
display: flex;
flex-shrink: 0;
height: 50px;
justify-content: space-between;
padding: 0 20px;
}
div.body {
background-color: white;
flex-grow: 1;
overflow: auto;
}
div.view {
padding: 20px 28px;
}
div.foot {
align-items: center;
background-color: white;
border-top: 1px solid gray;
display: flex;
flex-shrink: 0;
height: 50px;
justify-content: flex-end;
padding: 0 20px;
}
p {
margin: 0;
padding: 0;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
<div class="modal">
<div class="head">
<div>Head</div>
<div>Close</div>
</div>
<div class="body">
<div class="view">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>
Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
</div>
</div>
<div class="foot">
Foot
</div>
</div>
</div>
I then used a Modal.Service to open the content StackBlitz Angular Modal Service
When "Open Modal" is clicked the Modal shows and it looks as expected.
However when the browser window is resized in its height the modal does not resize.
Any idea what might be wrong?

Answer 1

The flex is incomplete, you need to define more to get expected behavior when it hits the max-height parameter. For example, if you want it to shrink and scroll when the content overflows with the vh shrinking try:
div.modal {
background-color: white;
display: flex;
flex-direction: column;
max-height: 60vh;
max-width: 400px;
width: 100%;
flex-shrink: 1;
overflow-y: auto;
}
Defining the flex-shrink is really the big part there though.
https://stackblitz.com/edit/modal-angular-flex-2-rysjej

Answer 2

A couple of mistakes. And angular encompasses your HTML around the component selector element. In this case your modal content was inside <content> which doesn't have flex applied.
div.cover {
flex-direction: column;
}
div.modal {
flex-grow: 1;
}
div.modal > content {
display: flex;
flex-direction: column;
height: 100%;
}