min-width

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

min-width가 max-width 또는 width보다 커지면 요소의 높이는 min-width의 값을 사용합니다.

구문

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

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

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

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

값

<length>: 고정 길이로 나타낸 최대 너비. 음수 값은 유효하지 않습니다.
<percentage>: 컨테이닝 블록 너비에 대한 백분율로 나타낸 최대 너비. 음수 값은 유효하지 않습니다.

키워드 값

auto: 최소 너비를 정하지 않음.
max-content: 본질적인 선호 높이.
min-content: 본질적인 최소 높이.
fill-available: 컨테이닝 블록의 너비에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 available로 구현함을 참고하세요.)
fit-content: min(max-content, max(min-content, fill-available))과 같음.

형식 구문

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

예제

table { min-width: 75%; }

form { min-width: 0; }

명세

Specification	Status	Comment
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'min-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 Flexible Box Layout Module The definition of 'min-width' in that specification.	Candidate Recommendation	Adds the `auto` keyword and uses it as the initial value.
CSS Transitions The definition of 'min-width' in that specification.	Working Draft	Defines `min-width` as animatable.
CSS Level 2 (Revision 1) The definition of 'min-width' in that specification.	Recommendation	Initial definition.

초기값	`auto`
적용대상	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
Animation type	a length, percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`min-width`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1 Notes Full support 1 Notes Notes CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.	IE Full support 7	Opera Full support 4 Notes Full support 4 Notes Notes CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Opera supports applying `min-width` to `table` elements.	Safari Full support 1	WebView Android Full support 4.4	Chrome Android Full support 18	Firefox Android Full support 4 Notes Full support 4 Notes Notes CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.	Opera Android Full support Yes	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
`auto`	Chrome Full support 21 Notes Full support 21 Notes Notes Chrome uses `auto` as the initial value for `min-width`.	Edge Full support 12 Notes Full support 12 Notes Notes Edge uses `auto` as the initial value for `min-width`.	Firefox Full support 34 Full support 34 No support 16 — 22 Notes Notes Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`.	IE No support No	Opera Full support 12.1 Notes Full support 12.1 Notes Notes Opera uses `auto` as the initial value for `min-width`.	Safari No support No	WebView Android Full support 37 Notes Full support 37 Notes Notes Chrome uses `auto` as the initial value for `min-width`.	Chrome Android Full support 25 Notes Full support 25 Notes Notes Chrome uses `auto` as the initial value for `min-width`.	Firefox Android Full support 34 Full support 34 No support 16 — 22 Notes Notes Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`.	Opera Android ?	Safari iOS No support No	Samsung Internet Android ?
`fit-content`	Chrome Full support 46 Full support 46 Full support 25 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge No support No	Firefox Full support 3 Prefixed Notes Full support 3 Prefixed Notes Prefixed Implemented with the vendor prefix: -moz- Notes 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.	IE No support No	Opera Full support 15 Prefixed Full support 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari Full support 11 Full support 11 Full support 6.1 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android Full support 46	Firefox Android Full support 4 Prefixed Notes Full support 4 Prefixed Notes Prefixed Implemented with the vendor prefix: -moz- Notes 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.	Opera Android ?	Safari iOS Full support 11 Full support 11 Full support 7 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 5.0 Alternate Name Full support 5.0 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`
`max-content`	Chrome Full support 46 Full support 46 Full support 25 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge No support No	Firefox Full support 66 Full support 66 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 15 Prefixed Full support 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari Full support 11 Full support 11 Full support 2 Alternate Name Alternate Name Uses the non-standard name: `intrinsic`	WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android Full support 46	Firefox Android Full support 66 Full support 66 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android ?	Safari iOS Full support 11 Full support 11 Full support 1 Alternate Name Alternate Name Uses the non-standard name: `intrinsic`	Samsung Internet Android Full support 5.0
`min-content`	Chrome Full support 46 Full support 46 Full support 25 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 25 Alternate Name Alternate Name Uses the non-standard name: `min-intrinsic`	Edge No support No	Firefox Full support 66 Full support 66 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 44	Safari Full support 11 Full support 11 Full support 2 Alternate Name Alternate Name Uses the non-standard name: `min-intrinsic`	WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android Full support 46	Firefox Android Full support 66 Full support 66 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android Full support 43	Safari iOS Full support 11 Full support 11 Full support 1 Alternate Name Alternate Name Uses the non-standard name: `min-intrinsic`	Samsung Internet Android Full support 5.0
`stretch` Experimental	Chrome Full support 22 Alternate Name Full support 22 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Edge No support No	Firefox No support No	IE No support No	Opera Full support 15 Alternate Name Full support 15 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Safari No support No	WebView Android Full support 4.4 Alternate Name Full support 4.4 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Chrome Android Full support 25 Alternate Name Full support 25 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Firefox Android No support No	Opera Android Full support 14 Alternate Name Full support 14 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Safari iOS No support No	Samsung Internet Android ?

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
See implementation notes.: See implementation notes.
Uses a non-standard name.: Uses a non-standard name.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

min-width

구문

값

키워드 값

형식 구문

예제

명세

브라우저 호환성

Legend

같이 보기

Learn the best of web development