Angular中Flexbox布局两元素占满窗口高度，Edge/Firefox滚动条问题求解

嗨，这个跨浏览器的flex布局坑我之前踩过！其实问题出在不同浏览器对Angular自定义组件（就是你写的<app-menu>、<app-my-view>这类标签）的默认样式处理有差异，再加上根元素的高度传递没做全，才导致Edge和Firefox里出现滚动条。咱们一步步来修复：

第一步：把根元素的高度链打通 #

flex布局的高度计算是依赖父元素的，所以得从最顶层的html、body开始，把高度都拉满：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
my-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止容器意外出现滚动条 */
}

你之前只设置了<my-app>的高度，但如果html和body的高度没设100%，<my-app>的100%高度就没地方参考，这也是跨浏览器差异的一个诱因。

第二步：给自定义组件显式设置display属性 #

Edge和Firefox对自定义元素的默认display值是inline或者inline-block，这会打乱flex布局的空间分配逻辑。咱们直接给组件指定display类型：

app-menu {
  display: block; /* 明确设置为块级元素 */
  border-bottom: 2px solid black;
  width: 100%;
  height: 50px;
  background: lightcoral;
  box-sizing: border-box;
}

app-my-view {
  display: flex;
  flex: 1;
  width: 100%;
  background: lightgreen;
  /* 如果你的主视图内部有内容需要滚动，就加overflow: auto；不需要的话可以去掉 */
  overflow: auto;
}

Chrome比较“贴心”，会自动把自定义组件当作block级元素处理，但Edge和Firefox遵循更严格的规范，必须咱们手动指定才行。

第三步：验证核心布局逻辑 #

你的<my-app>设置了flex-direction: column，这个是对的，能让菜单和主视图垂直堆叠。app-menu固定50px高度，app-my-view用flex:1占满剩余空间，再加上box-sizing: border-box确保边框不额外占高度，这些逻辑都没问题，只是缺了前面两步的跨浏览器兼容处理。

调整完之后，Chrome、Edge和Firefox应该都能实现你想要的效果：菜单和主视图垂直铺满窗口，不会出现多余的滚动条。

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