CSS Grid Not Expanding Container Height with Minmax in Safari 17
I'm stuck on something that should probably be simple... I'm currently working with a layout scenario where a CSS Grid container does not expand its height when using `minmax` in Safari 17. I've set up a grid with two columns, intending for the second column to push the height of the container based on the content it holds. In Chrome and Firefox, this works perfectly, but in Safari, it seems to ignore the content height. Here’s a simplified version of my CSS: ```css .container { display: grid; grid-template-columns: 1fr minmax(200px, 1fr); gap: 20px; } .item { padding: 10px; background-color: lightblue; } ``` And here's the HTML structure: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2 with a lot of content to force a height expansion in the grid.</div> </div> ``` In Safari, the second item doesn't seem to trigger a height increase in the grid container, leaving it at the height of the first item only. I've tried adding `align-items: start;` and `align-content: stretch;`, but those adjustments haven't made a difference. Additionally, I verified that `overflow` properties aren't affecting it. Has anyone encountered a similar scenario or does anyone have insights on how to resolve this? I’d like to ensure cross-browser compatibility without resorting to hacks or overly complex CSS. My development environment is Windows. This is happening in both development and production on Windows 11. Any advice would be much appreciated.