嵌套Flex布局HTML异常：文本下方空白随文本增大

你遇到的文本下方空白随内容增大而变大的问题，确实和Flex布局的设置有关，核心问题出在.one容器的flex-wrap: wrap属性上：

原因解析 #

当Flex容器设置flex-direction: column（垂直方向布局）时，flex-wrap: wrap的生效前提是容器有明确的高度限制——只有当容器高度不足以容纳所有flex项时，才会触发垂直方向的换行。而你的代码中.one没有设置高度，浏览器在计算容器尺寸时，会因为flex-wrap: wrap的存在，错误地为容器分配额外的空间，导致文本下方出现空白，且空白会随着文本高度的增加成比例放大。

修复方案 #

针对这个问题，有两种常见解决方式：

• 移除多余属性：如果不需要垂直方向的换行，直接删掉.one的flex-wrap: wrap即可，此时Flex容器会正常跟随内容高度自适应，不会产生多余空白。修改后的CSS：

.one {
  display: flex;
  flex-direction: column;
  /* 移除flex-wrap: wrap */
}

.two {
  display: flex;
  flex-direction: row;
}

.three {
  width: 240px;
  background-color: purple;
  flex: 1;
}

• 添加高度限制（如果需要垂直换行）：如果确实需要实现垂直方向的内容换行，给.one设置明确的高度（比如视口高度height: 100vh或固定像素值），让flex-wrap: wrap能正常触发，避免空间计算异常：

.one {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh; /* 添加明确高度 */
}

/* 其余样式不变 */

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