Высота объекта 100% не работает в Angular 7 + Electron 4

Question

У меня есть компонент jobs-table.component.html.Выше уровня у меня есть flex-direction: column;

<div class="jobs-table">
 ...
</div>

И стиль jobs-table.component.css:

:host {
  flex-grow: 1;
}
.jobs-table {
  height: 100%;
}

В Crome v73 и Mozilla v65.0.2 высота: 100%работает хорошо.Но в Electron 4 и Opera v58 не работает!Я вижу только один способ исправить это в моем случае использовать

height: calc(100vh - 15rem);

Есть ли другие способы исправить это?Код здесь https://stackblitz.com/edit/angular-pkipxs Спасибо заранее

Answer 1

Я решил свою проблему.Я использовал height: 1px; для родителя.И height: 100%; теперь хорошо работает для ребенка.Я думаю, что в моем случае flex-grow: 1; ведет себя так же, как и min-height: 100%;, поэтому height: 1px; помог мне решить мою проблему.

:host {
  flex-grow: 1;
  height: 1px; /* Required to make the child 100% of the flex-grow: 1 */
}
.jobs-table {
  height: 100%;
}