Why does setting `min-width: fit-content` on grid item influences the width of the sibling?
In this pen, there is a title, description and horizontal images. If you view it in a screen that's between 1024 and 1660 pixels wide, you should observe that the horizontal images (ID "social-media-images") overflow their container, which is a grid. The width of the "social-media-images" should stay fixed at 1660 pixels as long as the screen width is like described above. At the same time, it's above sibling (the element that wraps the text) has the same width (1660 pixels).
Now, if I set the
min-width of this "social-media-images" element to fit-content, the "social-media-images" element still overflows its container (it still has a width of 1660 pixels). However, it's above sibling now becomes as wide as its container (which is the grid element).
Can you explain what's going on here? Why does setting the min-width of a grid item influences the width of a sibling, while not influencing the width of the element that it is set on? Why was the text container initially as wide as the "social-media-images" elements but upon setting min-width on "social-media-images" elements, the text container now shrunk to fit the container?
Thank you3 Replies
What are your grid properties set to ? Probably best to throw a minimal reproduction into https://pen.new
I'm using Tailwind and the grid is a regular grid, which has an implicit single column, similar to a good old
div. I'm using grid to be able to use the gap property to adjust the spacing between the children (the grid items).
I already linked a pen in my question but I guess the code is a bit complicated, is it? If so, I can try to set up an example that doesn't involve Tailwind. Please let me know.I dont see a codepen link
Ohh there it is
Ill have to get a tailwind translator to see what this is saying