CSS Intrinsic And Extrinsic Sizing

by Julien Roche

HTML

<p>Normal</p>
<p class="content">I am sized based on the width (400px).</p>
<br />
<p>Min content</p>
<p class="content min-content">I am sized with min-content and wrap where possible.</p>
<br />
<p>Max content</p>
<p class="content max-content">I am sized with max-content and wrap where possible.</p>
<br />

CSS

.content {
  width: 400px;
  border: 2px dotted rgb(245,199,28);
}

.min-content {
  width: min-content;
}

.max-content {
  width: max-content;
}