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.
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?
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
Post a Comment