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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: max-width
slug: Web/CSS/max-width
tags:
- Referencia_CSS
translation_of: Web/CSS/max-width
---
<div>{{CSSRef}}</div>
<p>The <strong><code>max-width</code></strong> <a href="/en-US/docs/CSS">CSS</a> property sets the maximum width of an element. It prevents the <a href="/en-US/docs/Web/CSS/used_value">used value</a> of the {{ Cssxref("width") }} property from becoming larger than the value specified by <code>max-width</code>.</p>
<pre class="brush:css no-line-numbers">/* <length> value */
max-width: 3.5em;
/* <percentage> value */
max-width: 75%;
/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;
/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;
</pre>
<p>{{ Cssxref("max-width") }} overrides {{cssxref("width")}}, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<h3 id="Values">Values</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>The maximum width, expressed as a {{cssxref("<length>")}}.</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>The maximum width, expressed as a {{cssxref("<percentage>")}} of the containing block's width.</dd>
</dl>
<h4 id="Keyword_values">Keyword values</h4>
<dl>
<dt><code>none</code></dt>
<dd>The width has no maximum value.</dd>
<dt><code>max-content</code>{{experimental_inline()}}</dt>
<dd>The intrinsic preferred width.</dd>
<dt><code>min-content</code>{{experimental_inline()}}</dt>
<dd>The intrinsic minimum width.</dd>
<dt><code>fill-available</code>{{experimental_inline()}}</dt>
<dd>The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, <code>available</code>.)</dd>
<dt><code>fit-content</code>{{experimental_inline()}}</dt>
<dd>The same as <code>max-content.</code></dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples">Examples</h2>
<p>In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller:</p>
<div id="basic-max-width-demo">
<pre class="brush: html"><div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
</pre>
<pre class="brush: css">#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: 150px;
}
</pre>
</div>
<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
<p>The <code>fit-content</code> value can be used to set the width of an element based on the intrinsic size required by its content:</p>
<div id="fit-content-demo">
<pre class="brush: html" style="display: none;"><div id="parent">
<div id="child">
Child Text
</div>
</div>
</pre>
<pre class="brush: css">#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
}
</pre>
</div>
<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td>
<td>{{ Spec2('CSS3 Sizing') }}</td>
<td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords.<em> </em>(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Defines <code>max-width</code> as animatable.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.max-width")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li>
<li><a href="/en/CSS/box_model" title="en/CSS/box_model">The box model</a>, {{ Cssxref("box-sizing") }}</li>
</ul>
|
