CSS Grid Item Overlap Issues When Using minmax() in Safari
I'm upgrading from an older version and I'm sure I'm missing something obvious here, but I'm experiencing an scenario where items in my CSS Grid layout are overlapping when using the `minmax()` function in Safari. While the layout works perfectly in Chrome and Firefox, Safari seems to ignore the minimum size set with `minmax()`, causing some grid items to overlap. Here’s a simplified version of my CSS: ```css .container { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 10px; } .item { background: lightblue; padding: 20px; text-align: center; } ``` And here’s the HTML structure: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> ``` In Safari, Item 4 overlaps with Item 3 when the viewport is resized to be narrower than 300px. I've tried adding explicit width styles and adjusting the `minmax()` values, but nothing seems to resolve the overlap scenario. I'm using Safari 16.0 on macOS. Has anyone else faced this question, and how can I ensure proper layout across all browsers? What's the best practice here? I recently upgraded to Css 3.9.