utku
KPCKevin Powell - Community
•Created by utku on 9/11/2024 in #front-end
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 you7 replies