Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

fit-content()

この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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%)

Values

<length>
An absolute length.
<percentage>
A percentage relative to the inline size of the grid container.

Formal syntax

fit-content( [ <length> | <percentage> ] )

Example

CSS content

#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  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
CSS Grid Layout
The definition of 'fit-content()' in that specification.
Working Draft Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support[1] No support No support[2] No support[3] No support[1] ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support[1] No support[2] No support No support No support

[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 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48).

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz
 最終更新者: Sebastianz,