MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

overflow CSS 속성(property)은 그것의 블록 레벨 컨테이너(block-level container)보다 내용(content)이 너무 클 때(즉, 내용을 감싸고 있는 영역보다 커졌을 때), 내용을 잘라낼 지, 스크롤 바를 보여줄 지, 혹은 범위를 넘어가게 보여줄 지를 기술합니다.

/* 내용이 잘리지 않음 */
overflow: visible;

/* 내용을 자르고, 스크롤 바를 보여주지 않음 */
overflow: hidden;

/* 내용을 자르고, 스크롤 바도 보여줌. */
overflow: scroll;

/* 브라우저가 결정하게 함 */
overflow: auto;

/* 전역 값 */
overflow: inherit;
overflow: initial;
overflow: unset;

visible(기본값)이 아닌 다른 값으로 overflow 속성을 사용할 경우 새로운 블록 서식 문맥 (block formatting context) 을 생성하게 됩니다. 이 특징은 기술적인 이유로 중요합니다. 만약 스크롤하는 요소와 float이 교차한다면, 각 스크롤 단계마다 내용물을 강제적으로 다시 감싸게 될 것입니다. 이는 결국 스크롤 속도를 느리게 할 것입니다.

overflow 속성이 효력을 갖기 위해선, 반드시 블록 레벨 컨테이너의 높이(height 또는 max-height)가 설정되어 있거나, white-space가 nowrap으로 설정되어야 합니다.

Note: When programmatically setting scrollTop on the relevant HTML element, even when overflow has the hidden value an element may still need to scroll.

초기값visible
적용대상non-replaced block-level elements and non-replaced inline-block elements
상속no
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

overflow 속성은 아래 리스트에 나와 있는 값들처럼 하나의 키워드로 정의되어 있습니다.

Values

visible
기본 값. 내용(Content)이 잘리지 않으며, 컨텐트 박스(Content box) 영역을 벗어나서 렌더링 될 수도 있습니다.
hidden
필요하다면 컨텐트 박스에 맞게 내용이 잘립니다. 스크롤 바가 제공되진 않습니다.
scroll
필요하다면 컨텐트 박스에 맞게 내용이 잘립니다. 브라우저는 내용이 실제로 잘리는 여부에 따라서 스크롤 바를 제공합니다.(이는 내용이 변할 때, 스크롤 바가 나타나거나 사라지는 문제를 예방합니다.) 출력은 여전히 내용물을 넘쳐나게(overflowing) 나타낼 수도 있습니다.
auto
사용자 환경에 의존합니다. 컨텐트 박스안에 내용의 크기가 적절하다면, visible 처럼 보입니다. 하지만, 여전히 새로운 블록 문맥 요소를 생성하는 특성을 갖습니다. 파이어폭스 같은 데스크탑 브라우저는 내용물이 넘쳐난다면, 스크롤 바를 제공합니다.
overlay   
Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.

Mozilla Extensions

-moz-scrollbars-none
Use overflow:hidden instead.
-moz-scrollbars-horizontal
Use of overflow-x and overflow-y is preferred.
-moz-scrollbars-vertical
Use of overflow-x and overflow-y is preferred.
-moz-hidden-unscrollable
Is intended mainly for internal use and by themes. Disables scrolling of XML root elements and <html>, <body> by arrow keys and mouse wheel.

Formal syntax

visible | hidden | scroll | auto

Examples

p {  
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* content is not clipped */ 
}

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* no scrollbars are provided */ }

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* always show scrollbars */ }

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* append scrollbars if necessary */ }

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Specifications

Specification Status Comment
CSS Overflow Module Level 3
The definition of 'overflow' in that specification.
Working Draft  
CSS Basic Box Model
The definition of 'overflow' in that specification.
Working Draft No change
CSS Level 2 (Revision 1)
The definition of 'overflow' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier)[1] 4.0[2] 7.0 1.0 (85)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) 1.0 (1)[1] ? ? ?

[1] Through Firefox 3.6 (Gecko 1.9.2), the overflow property is incorrectly applied to table-group elements (<thead> , <tbody> , <tfoot>). This behavior is corrected in later versions.

[2] Internet Explorer 4 to 6 enlarges an element with overflow:visible (default value) to fit the content inside it. height/width behaves like min-height/min-width.

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: LeeJunyeol, nugurejeil
 최종 변경: LeeJunyeol,