Flexbox布局：将除激活项外的元素置于带滚动条的单行

可以通过调整CSS实现需求，无需修改现有HTML结构：

1. 给容器.foo添加横向滚动能力，同时保留flex-wrap: wrap让激活项能单独占一行
2. 给蓝色.bar设置flex-shrink: 0，避免它们被压缩，保证宽度固定，超出容器时触发滚动条

修改后的完整代码如下：

CSS #

.foo {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  overflow-y: hidden; /* 隐藏垂直方向的滚动条，避免多余占位 */
}

.bar {
  padding: 1rem 6rem;
  text-align: center;
  background: #A0E7E5;
  flex-shrink: 0; /* 关键：禁止蓝色项被压缩，保持原有宽度 */
}

.active {
  background: #B4F8C8;
  order: 99;
  width: 100%;
}

HTML（无需修改） #

<div class="foo">
  <div class="bar">1</div>
  <div class="bar">2</div>
  <div class="bar active">3</div>
  <div class="bar">4</div>
  <div class="bar">5</div>
</div>

原理说明 #

• overflow-x: auto让容器在内容宽度超出时显示横向滚动条
• flex-shrink: 0确保蓝色.bar不会因为容器宽度不足而被压缩，保持设定的内边距和宽度
• 激活项.active的width: 100%和order: 99会让它自动占据最后一行，不受前面滚动行的影响

内容的提问来源于stack exchange，提问作者brc-dd