Revision 1132683 of fit-content()

Revision slug: Web/CSS/fit-content
Revision title: fit-content()
Revision id: 1132683
Created: Oct 21, 2016, 4:51:35 AM
Creator: Sebastianz
Is current revision? No
Comment Initial description of fit-content()

Tags:

Revision Content

The fit-content() CSS function represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.

Syntax

/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* <percentage> value */
fit-content(40%)

Formal syntax

{{csssyntax}}

Example

CSS content

#container {
  display: grid;
  grid-template-columns: 1fr fit-content(300px) fit-content(300px);
  grid-gap: 5px;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML content

<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item with more text in it. Because the contents of it are
    wider than the maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>

Result

Specifications

Specification	Status	Comment
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}	{{Spec2("CSS Grid")}}	Initial definition

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	{{CompatNo}}^[1]	{{CompatNo}}	{{CompatNo}}^[2]	{{CompatNo}}^[3]	{{CompatNo}}^[1]	{{CompatUnknown}}

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	{{CompatNo}}^[1]	{{CompatNo}}^[2]	{{CompatNo}}	{{CompatNo}}	{{CompatNo}}

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0 and Opera 28.0.

[2] Implemented behind the preference layout.css.grid.enabled, defaulting to false since Gecko 51.0 {{geckoRelease(51.0)}}.

Revision Source

<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>The <strong><code>fit-content()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> function represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to auto (i.e. <code><a href="/en-US/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">
/* &lt;length&gt; values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* &lt;percentage&gt; value */
fit-content(40%)
</pre>

<h3>Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Example">Example</h2>

<h3>CSS content</h3>

<pre class="brush: css">
#container {
  display: grid;
  grid-template-columns: 1fr fit-content(300px) fit-content(300px);
  grid-gap: 5px;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container &gt; div {
  background-color: #8ca0ff;
  padding: 5px;
}
</pre>

<h3>HTML content</h3>

<pre class="brush: html">
&lt;div id="container"&gt;
  &lt;div&gt;Item as wide as the content.&lt;/div&gt;
  &lt;div&gt;
    Item with more text in it. Because the contents of it are
    wider than the maximum width, it is clamped at 300 pixels.
  &lt;/div&gt;
  &lt;div&gt;Flexible item&lt;/div&gt;
&lt;/div&gt;</pre>

<h3>Result</h3>

<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td>
   <td>{{Spec2("CSS Grid")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatNo}}<sup>[3]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Implemented behind the <em>experimental Web Platform features</em> flag in <code>chrome://flags</code> since Chrome 29.0 and Opera 28.0.</p>

<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code>, defaulting to <code>false</code> since Gecko 51.0 {{geckoRelease(51.0)}}.</p>

Revert to this revision