Flex容器子元素为何重叠？div2图片覆盖div1图片问题

你的问题源于flex容器的默认收缩行为：父级<section>作为flex容器，两个子<div>默认启用flex-shrink: 1，当它们的总宽度超出<section>宽度时，会被强行挤压收缩，最终导致两个<div>内的图片重叠。

修复方案 #

给两个子<div>添加flex-shrink-0属性禁止收缩；同时给父<section>加上overflow-x:auto，让超出的横向内容可滚动，避免布局错乱：

function ImageSlider() {
  return (
    <>
      <section className="h-72 w-full flex overflow-x-auto">
        <div
          className={`slide h-full max-w-fit group-hover:pause-animation flex flex-shrink-0`}>
          {images.map((img) => {
            return (
              <img
                src={img.src}
                alt={img.id}
                key={img.id}
                className="h-full w-auto object-cover"
              />
            )
          })}
        </div>
        <div
          className={`slide h-full max-w-fit group-hover:pause-animation flex flex-shrink-0`}>
          {images.map((img) => {
            return (
              <img
                src={img.src}
                alt={img.id}
                key={img.id}
                className="h-full w-auto object-cover"
              />
            )
          })}
        </div>
      </section>
    </>
  )
}

export default ImageSlider

关键修改说明 #

• flex-shrink-0：强制子<div>保持自身宽度，不会在flex容器中被挤压收缩
• overflow-x:auto：当子元素总宽度超出<section>宽度时，显示横向滚动条，保证内容完整展示
• w-auto object-cover：让图片保持原始宽高比例，避免被拉伸变形

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