我来帮你搞定这个flex布局的坑！你现在遇到的问题，核心是**white-space:nowrap**让内容强制不换行，加上flex容器默认的「内容优先」规则，导致整个布局被撑开超出屏幕，三个blade没法完整展示。咱们一步步来调整：

问题根源拆解 #

1. 外层的row方向flex容器里，main-content默认没有宽度限制，当内部的long-content因为nowrap强行拉宽后，main-content会跟着变大，直接撑爆屏幕宽度。
2. content容器是column布局，三个blade设了flex-grow:1，本来应该平分垂直空间，但水平方向的溢出会干扰垂直方向的空间分配，甚至让部分blade被挤出视口。

具体解决方案 #

1. 给外层和main-content加宽度约束 #

先确保最外层flex容器牢牢锁定在视口范围内，不让内容撑开整体：

.outer-flex-container {
  display: flex;
  flex-direction: row;
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  overflow: hidden; /* 禁止整体溢出 */
}

.sidebar {
  flex: 0 0 70px; /* 固定宽度，不收缩不扩展 */
}

.main-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 占满sidebar之外的剩余宽度 */
  overflow: hidden; /* 关键：限制内部内容不能撑开自己 */
}

2. 让三个blade平分空间并处理内部溢出 #

接下来调整content和blade的样式，确保垂直方向平分，水平方向的超长内容在blade内部滚动：

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 占满main-content去掉header后的剩余高度 */
  overflow: hidden; /* 防止content自身溢出 */
}

.blade {
  flex-grow: 1; /* 三个blade平分content的垂直空间 */
  overflow: auto; /* 内部内容过长时，显示滚动条 */
  margin: 8px; /* 可选：加个间距让布局更美观 */
  border: 1px solid #eee; /* 可选：加边框区分blade */
}

.long-content {
  white-space: nowrap; /* 保留你的需求：内容不换行 */
}

效果验证 #

这样设置后：

• 侧边栏sidebar固定70px宽度，不会被挤压或拉伸；
• main-content占满剩余视口宽度，不会被内部内容撑开；
• 三个blade会平分content的垂直空间，每个blade都完整显示在屏幕内；
• 每个blade里的超长内容因为white-space:nowrap不换行，但会在blade内部出现水平滚动条，不会影响整体布局。

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