Angular：配置<router-outlet>内组件高度以填满其父容器

核心思路是利用Angular的:host选择器直接控制路由组件的宿主元素，让它成为flex容器的可拉伸项，同时确保内部容器填满宿主元素空间。

修改步骤 #

1. 调整Workbench组件的样式 #

修改app.workbench.sass，添加:host的样式规则，并调整内部容器的属性：

:host
  // 将宿主元素设置为flex项，使其能被父flex容器拉伸
  display: flex
  flex: 1 1 auto
  width: 100% // 确保宽度填满父容器

.workbench-container
  flex: 1 1 auto // 让内部容器填满宿主元素的空间
  background-color: blue

原理说明 #

• 你的router-wrapper已经是display: flex且flex-direction: column的容器，并且设置了flex: 1 1 auto占据剩余空间。
• Angular组件的宿主元素默认是display: inline，这类元素无法被flex容器识别为可拉伸的子项，所以之前直接设置flex-grow无效。通过:host选择器将宿主元素改为display: flex并设置flex: 1 1 auto，就能让它填满router-wrapper的剩余空间。
• 内部的.workbench-container设置flex: 1 1 auto，会自动填满宿主元素的全部空间，最终实现蓝色区域覆盖整个黄色区域的效果。

为什么之前的尝试无效？ #

• 直接给.workbench-container设置flex-grow：因为宿主元素是inline元素，没有占据父容器的空间，内部容器自然无法拉伸。
• 设置height: 100%：需要父元素明确设置高度，而router-wrapper的高度是由flex布局动态计算的，不是固定值，所以百分比高度不生效。

内容的提问来源于stack exchange，提问作者Daniel Methner