AlphaModder AlphaModder - 7 months ago 39
CSS Question

Make a div's minimum width fit content?

I have a div that is normally set to take up 20% of the page's width, however, on a page where this 20% is not enough to display its content without overflowing, I would like it to take up the minimum amount of width necessary to fit the content. The content is not necessarily fixed-width, so I cannot simply use

with a hardcoded value in pixels.

I'd like to do this with pure CSS, if at all possible.


So, what I would suggest is defining a Breakpoint. So you have to figure out on which point your width is not enough and use so called Media Queries and Features to overwrite CSS rules to fit different situations.

So you could do something like this if your page breaks for smaller screen widths than 720px:

@media screen and (max-width: 720px) {
    /* ... */

Then you can define a new width or min-width inside of this media query.