Flexbox not working in safari with Next.js Images

I want to lay out Next.js Images with flex-wrap with a fixed height but variable width depending on the image. I'm using tailwind.

I've got it working perfectly on Google Chrome like so.

enter image description here

However when I look on Safari it seems to be creating extra space around the image. How can I fix the Flex issue on Safari so it displays like Google Chrome?

enter image description here

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>

CSS is mostly handled in tailwind however i've had to write some to target Next.js Image property.

app.css

.ck-product-image-container > span {
  position: static !important;
  height: 100% !important;
  width: intrinsic;
}


from Recent Questions - Stack Overflow https://ift.tt/34MuP6s
https://ift.tt/3Fgube0

Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)