翻译不完整。 请帮助我们翻译这篇文章!

fit-content() CSS 函数将给定大小夹紧为可用大小 根据公式 min(maximum size, max(minimum size, argument)).

/* <length> values */

/* <percentage> value */

The function can be used as a track size in CSS Grid properties, where the maximum size is defined by max-content and the minimum size by auto, 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.

The function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size.


The fit-content() function accepts a <length> or a <percentage> as an argument.


An absolute length.
A percentage relative to the available space in the given axis.
In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.

Formal syntax

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



#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;


<div id="container">
  <div>Item as wide as the content.</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>Flexible item</div>



Specification Status Comment
CSS Box Sizing Module Level 3
Working Draft Defines the function as laid out box size for width, height, min-width, min-height, max-width and max-height.
CSS Grid Layout
Candidate Recommendation Defines the function when used as a track size.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fit-content()Chrome Full support 29Edge Full support 16Firefox Full support 51IE No support NoOpera Full support 44Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 51Opera Android Full support 43Safari iOS Full support 10.3Samsung Internet Android Full support 6.0


Full support  
Full support
No support  
No support