如何用CSS Flex设置滚动行宽度与非滚动兄弟行一致？

可以实现，根据你的布局需求，分两种场景提供修改方案：

场景1：第三行宽度与容器（第二行）宽度一致（纵向堆叠行） #

如果你的“行”是指纵向排列的区块，只需调整外层flex容器的排列方向，再给滚动行设置宽度并禁止子元素收缩：

1. 修改.flex-scroll-container的样式，让子元素纵向排列：

.flex-scroll-container {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 可选，增加行间距 */
}

2. 调整.break类的样式，确保宽度占满容器，同时子元素不被压缩：

.break {
  overflow-x: scroll;
  width: 100%;
}

.break .box {
  flex-shrink: 0; /* 防止盒子被压缩，保证滚动效果正常触发 */
}

修改后第三行的宽度会和第二行一致（等于父容器#container的400px），里面的盒子因数量过多会横向溢出，触发滚动。

场景2：第三行宽度与第二行的内容宽度一致（横向排列列） #

如果你的“行”是指横向排列的列，希望第三列宽度匹配第二列的内容宽度，纯CSS无法动态匹配兄弟元素宽度，但可以通过以下方式实现：

方式A：固定宽度（适合内容尺寸固定的场景） #

直接给.break设置与第二行内容相同的宽度（第二行内容总宽度为4*75px + 20px*2 = 340px）：

.break {
  overflow-x: scroll;
  width: 340px;
  flex-shrink: 0; /* 防止flex容器压缩该元素 */
}

.break .box {
  flex-shrink: 0;
}

方式B：JavaScript动态匹配（适合内容尺寸动态变化的场景） #

通过JS获取第二行的宽度并赋值给第三行：

const secondRow = document.querySelector('.flex-scroll:nth-child(2)');
const thirdRow = document.querySelector('.break');
thirdRow.style.width = `${secondRow.offsetWidth}px`;

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