min-width

min-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.

min-width 속성의 값이 max-width 또는 width 속성의 값보다 큰 경우, 요소의 너비는 min-width 속성의 값으로 설정됩니다.

Syntax

/* <length> value */
min-width: 3.5em;

/* <percentage> value */
min-width: 10%;

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

Values

<length>

<length>로 표현되는 최소 너비로 음수 값은 유효하지 않습니다.

<percentage>

컨테이닝 블록 너비에 대한 <percentage>로 표현되는 최소 너비로  음수 값은 유효하지 않습니다.

Keyword values

auto

The default minimum width for flex items, providing a more reasonable default than 0 for other layouts.

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

Defined as min(max-content, max(min-content, fill-available)).

Formal syntax

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

Examples

table { min-width: 75%; }

form { min-width: 0; }

Specifications

Browser compatibility

See also

• width, max-width
• The box model, box-sizing