容器比内容物大

Question

我有一个比里面的东西还大的容器。问题是这个多余的部分覆盖了整个图像，我不能再在上面徘徊了。

此屏幕截图显示了包含包装文本的 div 的空间。

不知道是不是因为内容设置在自端。

明确地说，我希望标有 ## 的 div 具有其内容的宽度，而不是它的父级，这样我就可以将鼠标悬停在之前 div 中的图像上。

我尝试了一些解决方案，如 inline-flex 或 min-w-min 但它不起作用。

我正在与 Tailwind 合作。

谢谢！

<div class="bg-custombluegrey rounded-sm p-2 my-4 mx-auto w-4/5 max-w-xs md:max-w-5xl md:w-full md:bg-transparent md:flex md:relative md:p-8 lgl:my-8">

        <div className='hidden md:block md:w-1/2 md:max-w-xl md:absolute md:self-center md:z-10 md:filter grayscale hover:filter-none hover:z-20 transition ease-in-out duration-200'>
            <img src="/projects/ecom-home.png" className={`absolute + ${countEcom === 1 ? "z-30" : "z-10"}`}></img>
            <img src="/projects/ecom-market.png" className={`absolute + ${countEcom === 2 ? "z-30" : "z-10"}`}></img>
            <img src="/projects/ecom-cart.png" className={`relative + ${countEcom === 3 ? "z-30" : "z-10"}`}></img>
            <img src="/icons/next.png" onClick={handleClickEcom} className='absolute z-30 w-6 cursor-pointer bottom-20 right-2'></img>
        </div>

        ## <div className='flex min-w-min flex-col md:relative md:z-10'>
            <p class="text-customtexthighlight md:self-end">Personnal Project</p>
            <h3 className='md:self-end'>Farmer-Ecommerce</h3>
            <div className='bg-custombluegrey md:self-end rounded-sm md:p-4 md:w-3/4'>
                <p className='md:text-right'>An E-commerce website designed to help farmers to sell their products.
            Curstomers can create a cart in the limit of the stock set each week by the producer.
            The site provides a summury of the harvest that needs to be done at the end of the week depending on the carts thats have been ordered.</p>
                <br></br>
                <p className='md:text-right'> Built with a <span class="text-customtexthighlight">Django</span> and <span class="text-customtexthighlight">Bootstrap</span>.</p>
            </div>
            <div className="py-2 md:self-end">
                <a href="https://github.com/VincentAbensour/Projet-Maraichage">
                    <Image width={40} height={40} src="/icons/github-icon.png" alt="github-icon"></Image>
                </a>
            </div>
        </div>
    </div>