min 함수

min 함수는 전달된 값 중에서 최소값을 선택할 수 있게 해줍니다. 이 함수는 매개변수로 쉼표로 구분된 두 개 이상의 값을 받아들이고 그 중 가장 작은 값을 반환합니다.

문법

css선택자 {
  속성: min(값1, 값2);
}

예시

이제 블록의 너비는 부모 요소 기준 300px 또는 50% 중 더 작은 값을 가지게 됩니다:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: min(300px, 50%);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

함께 보기