Css grid children are overflowing each other only in Firefox [duplicate]

Home / Uncategorized / Css grid children are overflowing each other only in Firefox [duplicate]

Question:
This question already has an answer here:Prevent grid items from stretching in CSS Grid Layout 1 answer

I have a simple container with items. The container has property display: inline-grid. The idea is that if items don’t fit in one line – they move to next row. Items have to have display: flex property and adjust their width to available space. They also contain text that has to be partially hidden when it’s wider than parent element. I have it working, but there is an issue that is only visible in Firefox. When decreasing the size of the window the items don’t resize properly as you can see here:
http://prntscr.com/g8mtab

This is the first time I’m working with css grid, but I didn’t find any firefox specific issues. If anyone has an idea on how to fix it – I’d appreciate any help. Thanks!

Here’s working fiddle: https://jsfiddle.net/th3e1ues/3/

EDIT: I don’t want to wrap/break words in spans and the requirement is to use grid layout.


Answer:
In .list, change/add the following:display: flex;
justify-content: space-between;

You can remove the following from .item because it doesn’t do anything:display: flex;
flex-direction: row;
Read more

Leave a Reply

Your email address will not be published. Required fields are marked *