Intrinsic sizing

Intrinsic size is the one the content asks for, as opposed to the extrinsic size imposed by the container. These values decide how much space each box takes in any layout.

min-content: the narrowest width possible without overflowing, breaking the text at every opportunity.
max-content: the width the content needs without wrapping onto new lines, even if it overflows.
fit-content: uses max-content while it fits and adapts to the available space when it does not.
min-width and max-width: set limits on the size. In flex and grid, the automatic minimum of items is min-content, which is why they sometimes refuse to shrink.
aspect-ratio: keeps the proportion of a box, for example 16 / 9, even when its width changes.

Example

Change the width of the child with the item class and reduce the container width: max-content overflows, min-content breaks the text as much as possible and fit-content adapts between both.

Select width:

automin-contentmax-contentfit-content

ResultLiveContainer width100%

html

<div class="container">
  <div class="item">A box with some longer text inside it</div>
</div>

<div class="container">
  <div class="item">A box with some longer text inside it</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.item {
  background: #d9d2f5;
  padding: 1rem;
  width: auto;
}

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.item {
  background: #d9d2f5;
  padding: 1rem;
  width: auto;
}

Edit the code or use the selectors: the result updates instantly.