max-height

Baseline

Widely available

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

* Some parts of this feature may have varying levels of support.

See full compatibility
Learn more

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

시도해 보기

max-height: 150px;

max-height: 7em;

max-height: 75%;

max-height: 10px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the maximum height. <br />This will limit
    how tall the box can be, potentially causing an overflow.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: #ffffff;
}

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

구문

css

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

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

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

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

값

<length>
- : 고정 길이로 나타낸 최대 높이.
<percentage>
- : 컨테이닝 블록 높이에 대한 백분율로 나타낸 최대 높이.

키워드 값

none: 최대 높이를 정하지 않음.
max-content