👀 Views: 1200 💬 Answers: 1 📅 Created: 2025-08-28

css grid firefox CSS

I'm updating my dependencies and I'm sure I'm missing something obvious here, but I'm having a frustrating scenario where my CSS Grid layout is not behaving as expected in Firefox 118..... I'm using the `minmax()` function to define my column widths, but it seems to ignore the minimum value when the content within the grid cells exceeds the maximum defined size. This is causing overflow issues and misalignment in my layout. Here’s a simplified version of my CSS and HTML: ```css .grid-container { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 20px; } .grid-item { padding: 10px; background-color: lightblue; } ``` ```html <div class="grid-container"> <div class="grid-item">Item 1 with a lot of text that exceeds the width limits.</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> </div> ``` In Chrome and Safari, this works fine, and the grid items stay within the defined bounds. However, in Firefox, when the text in Item 1 wraps, it causes the grid item to expand beyond its intended width, which leads to a messy layout. I've tried using `overflow: hidden;` and setting a max-width, but it does not resolve the scenario. Has anyone else faced this question or can suggest a workaround? I want to ensure that the layout remains consistent across all browsers, especially for responsive design. Any ideas what could be causing this? The project is a web app built with Css. What's the correct way to implement this?