CSS Intrinsic Sizing Sample

Available in Chrome 46+ | View on GitHub | Browse Samples

Background

This new functionality extends the CSS sizing properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. The new keywords are:

Note that the fill keyword can currently only be used prefixed as -webkit-fill-available, pending CSSWG agreement to unprefix.

Live Samples

I use the default styles.

I am styled with width: min-content.

I am styled with width: max-content.

I am styled with width: fit-content.

I am styled with width: -webkit-fill-available.

HTML Snippet

<div id="container">
  <div>I use the default styles.</div>
  <div class="min-content">I am styled with <code>width: min-content</code>.</div>
  <div class="max-content">I am styled with <code>width: max-content</code>.</div>
  <div class="fit-content">I am styled with <code>width: fit-content</code>.</div>
  <div class="fill-available">I am styled with <code>width: -webkit-fill-available</code>.</div>
</div>

CSS Snippet

#container {
  border: 1px solid black;
  padding: 0.5em;
  margin: 0.5em;
}

#container > div {
  border: 1px solid blue;
  padding: 0.5em;
  margin: 0.5em;
}

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

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

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

.fill-available {
  width: -webkit-fill-available;
}