属性高度100％在Angular 7 + Electron 4中不起作用

Question

我有一个组件jobs-table.component.html。 高于级别，我有flex-direction：列；

<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%;具有相同的行为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%;
}