max-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

max-width CSS 속성은 요소의 최대 너비를 설정합니다. max-width는 width 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.

시도해보기

max-width가 width를 재설정하고, min-height가 max-width를 재설정합니다.

구문

css
/* <length> 값 */
max-width: 3.5em;

/* <percentage> 값 */
max-width: 75%;

/* 키워드 값 */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* 전역 값 */
max-width: inherit;
max-width: initial;
max-width: unset;

값

키워드 값

none

최대 너비를 정하지 않음.

max-content

본질적인 선호 높이.

min-content

본질적인 최소 높이.

fill-available

컨테이닝 블록의 높이에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 available로 구현함을 참고하세요.)

fit-content

max-content와 동일.

형식 구문

max-width = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

예제

다음 예제에서, 자식(child) 요소의 너비는 150픽셀과 부모(parent) 요소의 너비 중 더 작은 값이 됩니다.

html
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

fit-content 값을 사용하여 해당 요소의 내용이 필요로 하는 너비만 차지하도록 설정할 수 있습니다.

html
<div id="parent">
  <div id="child">Child Text</div>
</div>
css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: -webkit-fit-content;
}

접근성 고려사항

페이지의 확대 또는 글씨 크기를 키운 후에도 max-width를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.

명세

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values
초기값none
적용대상all elements but non-replaced inline elements, table rows, and row groups
상속no
Percentagesrefer to the width of the containing block
계산 값the percentage as specified or the absolute length or none
Animation typea length, percentage or calc();

브라우저 호환성

BCD tables only load in the browser

같이 보기