占据剩余空间的Flex列消失（下移），原因是什么？

我的布局是三列Flex布局：

• 第一列固定宽度，设置sticky定位滚动时吸附顶部
• 第二列仅设max-width，高度极高
• 第三列用flex:1占据剩余空间，同样设置sticky定位吸附顶部

问题是第三列会随第二列尺寸变化，有时会直接下移到底部消失。

简化代码 #

CSS代码 #

.first {
 width: 250px;
}

.third {
  flex: 1;
}

.roundedBox {
  background-color: aliceblue;
  border-radius: 15px;
  padding: 20px;
  margin: 20px;
}

.grid-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.sticky {
  position: sticky;
  top: 10px;
}

.item-long {
 background: orchid;
 height: 200vh;
}

HTML代码 #

<div class="grid-container">
  <div class="first sticky roundedBox">Some content</div>
  <div class="roundedBox item-long ">Lorem ipsum dolor </div>
  <div class="third sticky roundedBox">Somecontent</div>
</div>

问题分析与解决方案 #

问题核心在于容器设置了flex-wrap: wrap，当第一列+第二列的宽度接近或超出容器总宽度时，第三列会被挤到下一行。同时sticky元素在flex换行场景下的定位逻辑也会受空间分配干扰。

解决步骤：

1. 移除flex-wrap: wrap：既然需要三列始终在同一行展示，换行属性会成为空间不足时列被挤下去的诱因
2. 给第二列添加flex收缩规则：设置flex: 0 1 [你的max-width值]，让第二列在max-width范围内自动收缩，避免抢占过多空间
3. 保证sticky元素的父容器空间稳定：去掉换行后三列始终在同一行，能确保第三列的sticky定位在可视范围内生效

修改后的关键样式示例：

.grid-container {
  display: flex;
  flex-direction: row;
  /* 移除flex-wrap: wrap */
  align-items: flex-start;
}

.item-long {
 background: orchid;
 height: 200vh;
 /* 限制宽度同时允许收缩，可根据需求调整max-width数值 */
 flex: 0 1 600px;
 max-width: 600px;
}

调整后三列会始终保持在同一行，第三列稳定占据剩余空间，不会因第二列尺寸变化被挤到底部，同时sticky吸附效果也能正常工作。

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