CSS Grid Item Not Centering Vertically in Firefox 118 with Dynamic Content
I'm maintaining legacy code that I'm maintaining legacy code that I've searched everywhere and can't find a clear answer. I'm having trouble centering a grid item vertically in a CSS Grid layout when the content of the grid item is dynamic. My layout works as expected in Chrome, but in Firefox 118, the item appears misaligned. I have the following CSS for my grid container: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; height: 100vh; } ``` And for the grid item: ```css .item { display: flex; justify-content: center; align-items: center; height: 100%; } ``` However, when I add dynamic content, like a long text string or an image, the item doesn’t seem to stay centered. I’ve tried setting a min-height on the item, but that didn't help. In Firefox, the item seems to be pushing down instead of staying in the middle. Here's a simplified HTML structure: ```html <div class="container"> <div class="item">Dynamic content goes here, which might be longer than expected.</div> <div class="item">Another item</div> <div class="item">More items</div> </div> ``` I've checked for any browser-specific styles, but there are none applied. I also reviewed the developer console for any relevant logs or warnings, but nothing stands out. Is there a known scenario with Firefox and grid items using flexbox for alignment, or is there something I'm missing in my layout configuration? For context: I'm using Css on Linux. I recently upgraded to Css 3.9. Am I approaching this the right way? Thanks for taking the time to read this!