I'm trying to lay out Next.js Images using flex-wrap with a fixed height but variable width based on the image. I'm utilizing tailwind for this project.
Everything is working perfectly on Google Chrome as expected.
https://i.sstatic.net/KTTx9.jpg
However, when I view the layout on Safari, there seems to be extra space around the image. How can I resolve this Flex issue on Safari to make it display like it does on Google Chrome?
https://i.sstatic.net/eVg8E.jpg
Index.js
<div className="grid grid-cols-2 gap-8 md:flex md:flex-1 md:flex-wrap md:flex-row">
<div className="relative h-96 bg-red-100">
<div className="h-full ck-product-image-container">
<Image className="_image" src="" layout="fill" objectFit="contain" />
</div>
</div>
<div className="relative h-96 bg-red-100">
<div className="h-full ck-product-image-container">
<Image className="_image" src="" layout="fill" objectFit="contain" />
</div>
</div>
<div className="relative h-96 bg-red-100">
<div className="h-full ck-product-image-container">
<Image className="_image" src="" layout="fill" objectFit="contain" />
</div>
</div>
<div className="relative h-96 bg-red-100">
<div className="h-full ck-product-image-container">
<Image className="_image" src="" layout="fill" objectFit="contain" />
</div>
</div>
<div className="relative h-96 bg-red-100">
<div className="h-full ck-product-image-container">
<Image className="_image" src="" layout="fill" objectFit="contain" />
</div>
</div>
<div className="relative h-96 bg-red-100">
<div className="h-full ck-product-image-container">
<Image className="_image" src="" layout="fill" objectFit="contain" />
</div>
</div>
</div>
The majority of the CSS is handled in tailwind, but I did have to write some to target the Next.js Image property.
app.css
.ck-product-image-container > span {
position: static !important;
height: 100% !important;
width: intrinsic;
}