CSS не применяется к приложению Angular

Question

У меня есть модальная служба, с которой HTML / CSS работает нормально ( StackBlitz Angular Stati c 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><a href="#">Close</a></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>

Затем я использовал Modal.Service для открытия содержимого StackBlitz Angular Модальная служба

Когда «Открыть» Нажатие на модальное окно показывает модальное окно, и оно выглядит, как и ожидалось.

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

Есть идеи, что может быть не так?

Answer 1

Пара ошибок. И angular охватывает ваше HTML вокруг элемента селектора компонента. В этом случае ваш модальный контент был внутри <content>, к которому не применен флекс.

div.cover {
  flex-direction: column;
}

div.modal {
  flex-grow: 1;
}

div.modal > content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Answer 2

Сгибание является неполным, вам нужно определить больше, чтобы получить ожидаемое поведение при достижении параметра max-height . Например, если вы хотите, чтобы он уменьшался и прокручивался, когда содержимое переполняется с помощью vh shrinking, попытайтесь:

div.modal {

  background-color: white;
  display: flex; 
  flex-direction: column;
  max-height: 60vh;
  max-width: 400px;
  width: 100%;

  flex-shrink: 1;
  overflow-y: auto;
}

Определение flex-shrink действительно является большой частью.

https://stackblitz.com/edit/modal-angular-flex-2-rysjej