如何用纯CSS实现可溢出轮播的列宽统一为最宽列宽度

完全可以用纯CSS实现这个需求，推荐用CSS Grid布局来做，它能自动让所有列宽度统一，而且等于最宽元素的宽度，同时支持容器横向溢出。

修改后的CSS代码 #

.container {
  position: absolute;
  display: grid;
  grid-auto-columns: 1fr; /* 让所有列宽度相等 */
  grid-auto-flow: column; /* 横向排列列 */
  justify-content: center;
  align-items: center;
  /* 轮播场景一般会给外层容器加 overflow: hidden; 然后通过动画移动这个.container，实现轮播效果 */
}

.col {
  /* 不用额外加flex相关属性，Grid自动处理列宽 */
}

.item {
  margin: 0.25rem;
  background-color: red;
  height: 100px;
  width: 100px;
}

.fat {
  width: 200px;
}

方案原理 #

• grid-auto-flow: column 让容器内的.col横向排列，超出容器宽度时自动溢出，刚好适配轮播的需求。
• grid-auto-columns: 1fr 会让所有列宽度保持一致，且这个宽度会自动取所有列里内容最宽的那个值，完全符合你要的“所有列宽度等于最宽元素宽度”的要求。
• 比起Flexbox，Grid在这种“等宽列且跟随最宽内容”的场景下用起来更省心，无需额外属性计算。

Flexbox替代方案 #

如果习惯用Flexbox，也能实现，代码如下：

.container {
  position: absolute;
  display: flex;
  flex-wrap: nowrap; /* 禁止换行，保持横向排列 */
  justify-content: center;
  align-items: center;
}

.col {
  flex: 1 0 0; /* 让列平分可用空间 */
  min-width: max-content; /* 确保列宽度至少容纳自身内容，最终所有列会统一为最宽列的宽度 */
}

/* 其余样式不变 */

不过这个Flex方案兼容性稍差（max-content是CSS3属性，现代浏览器均支持，但旧版IE不兼容），Grid方案在现代浏览器中的兼容性已经非常完善。

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