How does min-content differs from max-content?
Hello, from what I've read and understood,
min-content is used to make text wrapped so there isn't any overflow while max-content doesn't make text wrapped and can cause overflow.
Can someone confirm if that's correct and if there is more to that please. I often see people use it with width property, min and max-content are only used with width?
Is it only used to text or for containers also, like div?3 Replies
Why would someone use
width together with max-content? I mean this doesn't cause overflow issues?min-content will make it as small as it can possibly get, so it isn't really used to prevent overflow, it's used to make something as small as it can possibly get, based on the content inside of it. It's pretty rare that I use it, tbh.
max-content is like you said, so a width: max-content is probably not a good idea, but a max-width: max-content can come in handy at times, like if you head a heading that you want a background on, but if the text is short, you want the background to match the width of the text.Oh ok I see, thanks !