현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
max-width CSS 속성은 요소의 최대 너비를 설정합니다. 이는 width 속성에 사용된 값이 min-width에 지정된 값보다 넓어지는 것을 방지합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
max-width 속성의 값은 width 속성의 값을 오버라이딩하고, min-width 속성의 값은 max-width 속성의 값을 오버라이딩 합니다.
Syntax
/* <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;
Values
<length><length>로 표현되는 최대 너비 값입니다.<percentage>- 컨테이닝 블록 너비에 대한
<percentage>로 표현되는 최대 너비 값입니다.
Keyword values
none- The width has no maximum value. (default)
max-content- The intrinsic preferred width.
min-content- The intrinsic minimum width.
fill-available- The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword,
available.) fit-content- The same as
max-content.
Formal syntax
<length> | <percentage> | none | max-content | min-content | fit-content | fill-available
Examples
In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller:
<div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: 150px;
}
The fit-content value can be used to set the width of an element based on the intrinsic size required by its content:
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
}
Accessibility concerns
Ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'max-width' in that specification. |
Working Draft | Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.) |
| CSS Transitions The definition of 'max-width' in that specification. |
Working Draft | Defines max-width as animatable. |
| CSS Level 2 (Revision 1) The definition of 'max-width' in that specification. |
Recommendation | Initial definition. |
| 초기값 | none |
|---|---|
| 적용대상 | all elements but non-replaced inline elements, table rows, and row groups |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| Media | visual |
| Computed value | the percentage as specified or the absolute length or none |
| Animation type | a length, percentage or calc(); |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1 | 12 | 11 | 7 | 42 | 2 |
fit-content, max-content, and min-content | No3 | No | 3 -moz- 4 | No | No | No5 |
fill-available | No | No | No | No | No | No |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | Yes | ? | ? | ? | ? |
fit-content, max-content, and min-content | ? | ? | ? | No | ? | ? | No |
fill-available | ? | ? | ? | ? | ? | ? | No |
1. CSS 2.1 leaves the behavior of max-width with table undefined. Firefox supports applying max-width to table elements.
2. CSS 2.1 leaves the behavior of max-width with table undefined. Opera supports applying max-width to table elements.
3. Chrome implements an earlier proposal for setting width to an intrinsic width: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for fill-available or fit-content.
4. Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
5. Safari implements an earlier proposal for setting width to an intrinsic width: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for fill-available or fit-content.