1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
---
title: fit-content()
slug: Web/CSS/fit-content
translation_of: Web/CSS/fit-content
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>fit-content()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 函数将给定大小夹紧为可用大小 根据公式 <code>min(<var>maximum size</var>, max(<var>minimum size</var>, <var>argument</var>))</code>.</span></p>
<pre class="brush: css no-line-numbers">/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)
/* <percentage> value */
fit-content(40%)
</pre>
<p>The function can be used as a track size in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> properties, where the maximum size is defined by <code><a href="/en-US/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> and the minimum size by <code><a href="/en-US/docs/Web/CSS/grid-template-columns#auto">auto</a></code>, which is calculated similar to <code>auto</code> (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>
<p>The function can also be used as laid out box size for {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} and {{cssxref("max-height")}}, where the maximum and minimum sizes refer to the content size.</p>
<h2 id="Syntax">Syntax</h2>
<p>The <code>fit-content()</code> function accepts a <code><length></code> or a <code><percentage></code> as an argument.</p>
<h3 id="Values">Values</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>An absolute length.</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>A percentage relative to the available space in the given axis.</dd>
<dd>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.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Example">Example</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight[3]">#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;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="Result">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("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}</td>
<td>{{Spec2("CSS3 Sizing")}}</td>
<td>Defines the function as laid out box size for {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} and {{cssxref("max-height")}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td>
<td>{{Spec2("CSS Grid")}}</td>
<td>Defines the function when used as a track size.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.grid-template-columns.fit-content")}}</p>
|
