Safari 17 issue with flex and grid

[jaimeiniesta]

What version of Tailwind CSS are you using?

3.4.10

What build tool (or framework if it abstracts the build tool) are you using?

"autoprefixer": "^10.4.16",
"daisyui": "^4.12.10",
"postcss": "^8.4.33",
"postcss-import": "^16.0.0"

What version of Node.js are you using?

20.2.0

What browser are you using?

Safari 17

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/uzqrEtPtKX

That link was found in this other guy's question in SO
https://stackoverflow.com/questions/78335449/safari-strange-issue-with-flex-and-column-and-grids

Describe your issue

Some elements have broken layout and appear out of place, as can be seen in the screenshots of this issue:

saadeghi/daisyui#3205

This issue has been fixed in Safari 18.0 beta so maybe it's not worth looking at it, but I thought you might want to be aware of it for backwards compatibility.

Thanks!