create-react-app项目使用Flex实现垂直响应式布局失效问题求助

核心根因 #

Create React App 生成的项目默认在 body 下插入了一层 <div id="root"></div> 作为所有 React 组件的挂载容器，你没有为该节点设置高度规则，导致 .box 的 height: 100% 无法继承到上层的 100vh，纵向高度计算失效。

修复步骤 #

• 第一步：修改全局高度规则，将 #root 纳入高度继承链

html,
body,
#root {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  /* 兜底禁止浏览器默认滚动条出现，符合你的需求 */
  overflow: hidden;
}

• 第二步：添加全局盒模型规则，避免边框、padding 撑大元素尺寸触发溢出

* {
  box-sizing: border-box;
}

• 第三步：检查DOM嵌套层级，确保 .box 上层的所有父容器都设置了 height: 100%。如果你的 .box 不是 #root 的直接子元素，比如外层包了 App 组件的默认 div，需要为该层级的容器也添加 height: 100% 规则。
• 第四步：核查 .content 区域的子元素，避免子元素设置固定高度导致布局溢出，原有 overflow: auto 规则可以保证内容超出时仅内部滚动，不会触发浏览器全局滚动条。

补充说明 #

该问题和 webpack 等底层配置完全无关，仅为DOM嵌套层级差异导致的CSS高度继承中断问题，修改后即可和原生HTML/CSS项目表现一致。

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