I've been consuming quite a bit of CSS educational content recently and sometimes reading the CSS spec. I've come across the concept of "ideal size" a couple of times. I'm not sure whether it's a strictly technical name or a more loose name.
I think "ideal size" is something like "the size that an element wants to be most, if not limited in any way". But I'm not sure.
Is there a formal definition for this term? Or could anyone give an approximate definition of it?
It's basically equivalent to max-content
div {
width: max-content;
outline: 1px solid red;
margin: 10px;
}<div>some text</div>
<div>more text here</div>A box’s “ideal” size in a given axis when given infinite available space. Usually this is the smallest size the box could take in that axis while still fitting around its contents, i.e. minimizing unfilled space while avoiding overflow.
So we try to have "no overflow" and "no wasted space" but it can be more complex in some cases.