图片嵌套Div后Flex容器无法横向滚动的问题解决咨询

出现这个问题的核心原因是Flex子元素的默认行为导致父容器的横向滚动失效，只需调整两个样式即可恢复预期滚动行为：

解决方案代码 #

<div className='w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none flex-nowrap'>
  {props?.categoryMovies?.map((movie, i)=> (
    <div className='w-60 h-60 flex-shrink-0'>
      <img 
        id={movie?.id}
        key={i}
        className='w-full h-full object-contain'
        src={props?.preImg + movie?.poster_path} />
    </div>
  ))}
</div> 

关键修改说明 #

• 给父容器添加 flex-nowrap 类：强制所有子元素在同一行排列，禁止自动换行，确保内容横向溢出父容器。
• 给子div添加 flex-shrink-0 类：禁止子元素被Flex容器压缩，保留w-60的固定宽度，这样多个子元素的总宽度会超过父容器的w-full限制，触发父容器的横向滚动。

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