Next.js中使用flexbox时Image组件消失问题求助

当你给<main>添加flex类后，它成为了flex容器，内部的div作为flex子项会默认继承flex-shrink: 1的样式——这意味着如果容器可用空间不足，子项会自动收缩。

你的div仅设置了max-w-[200px]和h-[200px]，没有固定宽度或阻止收缩的属性，导致在flex容器下div的宽度被压缩至0。而你使用的fill属性的Image组件（推测是Next.js Image）完全依赖父容器的relative定位和明确尺寸，没有可填充的空间自然就会消失。

以下几种方法都能解决问题，根据你的布局需求选择：

方法一：阻止子项收缩（推荐） #

给承载Image的div添加flex-shrink-0，禁止它在flex容器中被压缩，同时可以把max-w-[200px]替换为w-[200px]来固定宽度：

<main className="flex">
    <div className='relative h-[200px] w-[200px] bg-red-500 rounded-xl flex justify-center items-center flex-shrink-0'>
        <Image src={image1} alt="image" fill style={{ objectFit: "scale-down" }} />
    </div>
</main>

方法二：允许flex容器换行 #

如果需要保留max-w-[200px]的自适应宽度，可以给<main>添加flex-wrap，让子项在空间不足时自动换行，避免被收缩：

<main className="flex flex-wrap">
    <div className='relative h-[200px] max-w-[200px] bg-red-500 rounded-xl flex justify-center items-center'>
        <Image src={image1} alt="image" fill style={{ objectFit: "scale-down" }} />
    </div>
</main>

方法三：明确flex子项的初始宽度 #

给div添加basis-[200px]（对应CSS的flex-basis: 200px），指定flex子项的初始宽度，配合max-w-[200px]使用：

<main className="flex">
    <div className='relative h-[200px] max-w-[200px] basis-[200px] bg-red-500 rounded-xl flex justify-center items-center'>
        <Image src={image1} alt="image" fill style={{ objectFit: "scale-down" }} />
    </div>
</main>

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