如何让子div像img元素一样撑开父flexbox并实现横向滚动？

问题根源 #

直接用<img>作为Flex子元素时，图片属于替换元素，默认不会被Flex布局压缩（相当于隐性的flex-shrink: 0），因此会撑宽父容器，配合overflow-x-scroll实现横向滚动。

但把图片放进<div>后，<div>作为Flex子元素默认flex-shrink: 1——这意味着它会自动收缩以适配父容器宽度，容器被撑不宽，自然就没有溢出滚动效果。

快速解决 #

给每个包裹图片的<div>添加flex-shrink: 0（如果使用Tailwind CSS，直接用flex-shrink-0类），禁止它被压缩，让它保持图片的宽度，这样父容器就会被撑宽，恢复滚动效果：

<div class="flex gap-2 overflow-x-scroll">
  <div class="flex-shrink-0"><img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image"></div>
  <div class="flex-shrink-0"><img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image"></div>
  <div class="flex-shrink-0"><img class="rounded cursor-pointer" src="@/images/image.png" alt="meet-loaf image"></div>
</div>

原生CSS写法：

/* 给Flex容器下的所有子div设置 */
.flex > div {
  flex-shrink: 0;
}

额外思路 #

也可以给<div>设置width: fit-content，让它贴合图片的宽度，再配合flex-shrink: 0也能达到效果，但flex-shrink: 0是更直接的方案，毕竟问题本质就是Flex子元素的收缩特性导致的。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov