Overflow

Table of contents

1. Overflow Property
   1. what is overflow?
   2. Overflow Properties
2. Overflow Value
   1. Visible
   2. Hidden
   3. Scroll
   4. Auto

Overflow Property

what is overflow?

컨텐츠가 너무 클경우 어떤 일이 일어나야 하는지를 컨트롤하는 속성

▸ 그냥 흘러넘치게 하거나, 스크롤바를 이용하거나, 보이지 않게 할 수 있음

▸ overflow, overflow-x, overflow-y가 있음

!Note

Overflow Properties

• overflow-x : what to do with the left/right edges of the content

• overflow-y : what to do with the top/bottom edges of the content

Overflow Value

Visible

Default, The content renders outside the element’s box

Hidden

The overflow is clipped, and the rest of the content will be invisible

Scroll

The overflow is clipped, and a scrollbar is added to see the rest of the content

Auto

Similar to scroll, but it adds scrollbars only when necessary

한번에 비교하기

div{
    width: 100px;
    height: 150px;
    background: lightpink;
}

.overflow_div4{
    overflow: hidden;
}

.overflow_div3{
    overflow: auto;
}

.overflow_div2{
    overflow: scroll;
}

.overflow_div1{
    overflow: visible;
}