Use minimum possible width [duplicate]

Question

I have a container that effectively, I want to compress the contents to their minimum width without scroll bars. fit-content is close, but allows the content to use more width than it actually needs. I could also explicitly set the container's width, but that requires me to know the min-width of the contents ahead of time.

So in the example below, the box width should default to compressing the inner item to 3 lines. How can the box reclaim this bit of space?

.box { background-color: green; resize: both; overflow: auto; padding: 1em; min-width: 2em; width: fit-content; height: 10em; } .el { background-color: teal; width: 100%; min-width: 5em; }

<div class="box"> <div class="el"> Lorem isa psalm ipsom </div> </div>

This can get messy, when you say as small as possible what do you mean? Just because it is compressed in to three lines doesn't make it smaller than when it isn't, at least in terms pixels. — Libra
– Libra, Commented Feb 5, 2020 at 19:39

ajobi · Accepted Answer · 2020-02-05 19:47:09Z

I think what you are looking for is the min-content width value:

.box { background-color: green; padding: 1em; min-width: 2em; width: min-content; height: 10em; } .el { background-color: teal; }

<div class="box"> <div class="el"> Lorem isa psalm ipsom </div> </div>

https://developer.mozilla.org/en-US/docs/Web/CSS/width#min-content

Nithin Suresh · Accepted Answer · 2020-02-05 19:45:40Z

You can simply do this by using the CSS width rule.

<style> .box { background-color: green; width: max-content; } .el { background-color: teal; width: max-content; } </style>

In case you want the content to be fit with exactly the width of the word, change the width to min-content

<style> .box { background-color: green; width: max-content; } .el { background-color: teal; width: min-content; } </style>

Hope that solves your problem..

Collectives™ on Stack Overflow

Use minimum possible width [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related