适合内容 | fit-content

fit-content

这是一种实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

fit-content() 根据下式夹具给定尺寸到可用大小min(maximum size, max(minimum size, argument))。

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

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

该函数可用作CSS网格属性中的轨道大小，其中最大大小由max-content最小大小定义，最小大小除以等于（ie ）auto计算，除非轨道大小在参数大于在最低限度。autominmax(auto, max-content)auto

它也可以用作布置框尺寸为width，height，min-width，min-height，max-width和max-height，其中，所述最大尺寸是指最大内容大小和最小尺寸为最小的内容大小。

句法

接受一个<length>或一个<percentage>参数的函数

取值

<length>绝对长度。

形式语法

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

例

CSS内容

#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内容

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

结果

规范

Specification	Status	Comment
CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'fit-content()' in that specification.	Working Draft	Defines the function as laid out box size for width, height, min-width, min-height, max-width and max-height.
CSS Grid LayoutThe definition of 'fit-content()' in that specification.	Candidate Recommendation	Defines the function when used as a track size.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Supported as laid out box size	No support	?	No support2	No support	No support	?
Supported as track size	57.01	No support	52.0 (52.0)3	No support	No support4	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Supported as laid out box size	No support	No support2	?	?	?
Supported as track size	?	52.0 (52.0)3	No support	No support	No support