Flexbox列宽在窗口缩小时无法收缩的问题解决

问题现象 #

使用Flexbox布局5个盒子，其中Bob对应的大盒子能随浏览器窗口缩小正常收缩，但Kate、Nick、Jane、Fred所在的两列小盒子宽度无法缩小，无法实现响应式效果。

原因分析 #

1. 小盒子.small设置了固定宽度width:195px，固定宽度元素默认不会主动收缩；
2. 承载小盒子的.column容器没有设置宽度限制或flex收缩规则，导致容器无法根据父容器宽度调整，进而限制了内部小盒子的收缩空间。

解决方案 #

通过以下调整让列盒子和内部小盒子具备收缩能力：

• 给.column添加flex: 1，让它能根据父容器分配空间并收缩；
• 将.small的固定宽度改为flex-basis: 100%，配合默认的flex-shrink: 1，让小盒子占满列容器宽度并随容器收缩；
• 给.big用flex-basis: 400px替代固定宽度，同时添加max-width: 400px，保证它在窗口足够大时保持原尺寸，窗口缩小时能收缩。

修改后的CSS代码 #

.container {
  display: flex;
  width: 100%;
  justify-content: center;
  border: 2px solid red;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1; /* 让列容器能分配并收缩空间 */
  margin: 0 2.5px; /* 可选：添加间距避免盒子紧贴 */
}

.big {
  display: flex;
  flex-basis: 400px; /* 替代固定width */
  max-width: 400px; /* 最大宽度限制 */
  flex-shrink: 1; /* 允许收缩 */
  height: 400px;
  background: yellow;
  border: 5px solid blue;
  margin: 0 2.5px; /* 可选：添加间距 */
}

.small {
  display: flex;
  flex-basis: 100%; /* 占满列容器宽度 */
  flex-shrink: 1; /* 允许收缩 */
  height: 195px;
  background: yellow;
  border: 5px solid blue;
  margin: 2.5px 0; /* 可选：添加上下间距 */
}

效果说明 #

修改后，当浏览器窗口缩小时：

• .column会随父容器.container的宽度变化自动调整；
• .small会填满.column的宽度，随列容器一起收缩；
• .big在窗口宽度足够时保持400px，窗口变窄时会同步收缩，整体布局保持响应式。

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