如何让内部Flex占满全部空间？Flexbox网格高度失效排查

我一眼就看出问题所在啦——百分比高度的生效依赖于父元素有明确的高度定义，你的代码里没给html和body设置高度，导致.wrapper的height: 100%找不到参照基准，自然无法让内部Flex元素占满全部空间。

核心解决步骤 #

1. 给根元素和body设置高度基准
   默认情况下，html和body的高度是由内部内容撑开的，不会自动占满浏览器视口。我们需要给它们设置height: 100%，这样.wrapper的height:100%才有明确的参照对象。

2. 优化flex属性写法
   你写的flex: 1 100%;可以简化为flex: 1;，flex:1等价于flex-grow:1; flex-shrink:1; flex-basis:0%;，更贴合“占满剩余空间”的需求；另外.navigation的flex: 0 60px建议写成flex: 0 0 60px，明确指定flex-basis为60px，避免样式歧义。

修改后的完整代码 #

html, body {
  margin: 0;
  height: 100%; /* 关键：让根元素占满视口高度 */
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%; /* 现在有了父元素的高度参照 */
}

.container {
  background: blue;
  display: flex;
  flex: 1; /* 简化写法，自动占满剩余空间 */
}

.navigation {
  display: flex;
  flex: 0 0 60px; /* 固定高度60px，不参与空间分配 */
  background: green;
}

.chat-list {
  background: rgba(255, 50, 40, 0.5);
  width: 200px; /* 这里补充你未写完的宽度值，示例设为200px */
}

替代方案：使用视口高度单位vh #

如果你不想依赖百分比高度的层级传递，可以直接用vh单位（视口高度）设置.wrapper的高度，这样不需要给html和body额外设置高度，写法更简洁：

body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 直接占满整个视口高度 */
}

/* 其他样式保持不变 */

这样修改后，你的内部Flex元素就能成功占满全部空间啦～

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