DONT ADD ANYTHING HERE!

The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction

Example

Notes

  1. overflow is a shorthand for the following CSS properties:
    1. overflow-x
    2. overflow-y

Values

  1. visible
    1. Overflow content is not clipped and may be visible outside the element's padding box
    2. The element box is not a scroll container
    3. This is the default value of the overflow property
  2. hidden
    1. Overflow content is clipped at the element's padding box
    2. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists
    3. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse
    4. The content can be scrolled programmatically (for example, by linking to anchor text, by tabbing to a hidden yet focusable element, or by setting the value of the scrollLeft property or the scrollTo() method), in which case the element box is a scroll container
  3. clip
    1. Overflow content is clipped at the element's overflow clip edge that is defined using the overflow-clip-margin property
    2. As a result, content overflows the element's padding box by the length value of overflow-clip-margin or by {0px} if not set
    3. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported
    4. No new formatting context is created
    5. To establish a formatting context, use overflow: clip along with display: flow-root
    6. The element box is not a scroll container
  4. scroll
    1. Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars
    2. User agents display scroll bars whether or not any content is overflowing, so in the horizontal and vertical directions if the value applies to both directions
    3. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes Printers may still print overflow content
    4. The element box is a scroll container
  5. auto
    1. Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars
    2. Unlike scroll, user agents display scroll bars only if the content is overflowing
    3. If content fits inside the element's padding box, it looks the same as with visible but still establishes a new formatting context
    4. The element box is a scroll container

Example 1 (Default)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores incidunt enim fugit velit reiciendis ex iste explicabo voluptates eaque possimus, quas nobis odio dolorum natus iusto quia vero tempora sit quidem. Cupiditate est consequuntur fuga, qui incidunt quia soluta, eveniet natus nobis, reprehenderit veritatis a nulla officiis libero laudantium corrupti. Consequuntur dolor nostrum est a error recusandae tempore voluptate debitis dignissimos possimus iusto atque aliquam molestiae quisquam eveniet odit sapiente aut quidem repellat, doloribus explicabo in culpa tempora. Numquam voluptatum velit et ab consequatur magni fugit voluptate inventore amet, dolor aliquid, iure recusandae fugiat minima ex quae error doloribus quidem? The end
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, numquam. The end

Example 2 (Visible)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores incidunt enim fugit velit reiciendis ex iste explicabo voluptates eaque possimus, quas nobis odio dolorum natus iusto quia vero tempora sit quidem. Cupiditate est consequuntur fuga, qui incidunt quia soluta, eveniet natus nobis, reprehenderit veritatis a nulla officiis libero laudantium corrupti. Consequuntur dolor nostrum est a error recusandae tempore voluptate debitis dignissimos possimus iusto atque aliquam molestiae quisquam eveniet odit sapiente aut quidem repellat, doloribus explicabo in culpa tempora. Numquam voluptatum velit et ab consequatur magni fugit voluptate inventore amet, dolor aliquid, iure recusandae fugiat minima ex quae error doloribus quidem? The end
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, numquam. The end

Example 3 (Scroll)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores incidunt enim fugit velit reiciendis ex iste explicabo voluptates eaque possimus, quas nobis odio dolorum natus iusto quia vero tempora sit quidem. Cupiditate est consequuntur fuga, qui incidunt quia soluta, eveniet natus nobis, reprehenderit veritatis a nulla officiis libero laudantium corrupti. Consequuntur dolor nostrum est a error recusandae tempore voluptate debitis dignissimos possimus iusto atque aliquam molestiae quisquam eveniet odit sapiente aut quidem repellat, doloribus explicabo in culpa tempora. Numquam voluptatum velit et ab consequatur magni fugit voluptate inventore amet, dolor aliquid, iure recusandae fugiat minima ex quae error doloribus quidem? The end
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, numquam. The end

Example 4 (Hidden)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores incidunt enim fugit velit reiciendis ex iste explicabo voluptates eaque possimus, quas nobis odio dolorum natus iusto quia vero tempora sit quidem. Cupiditate est consequuntur fuga, qui incidunt quia soluta, eveniet natus nobis, reprehenderit veritatis a nulla officiis libero laudantium corrupti. Consequuntur dolor nostrum est a error recusandae tempore voluptate debitis dignissimos possimus iusto atque aliquam molestiae quisquam eveniet odit sapiente aut quidem repellat, doloribus explicabo in culpa tempora. Numquam voluptatum velit et ab consequatur magni fugit voluptate inventore amet, dolor aliquid, iure recusandae fugiat minima ex quae error doloribus quidem? The end
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, numquam. The end

Example 5 (overflow-clip)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores incidunt enim fugit velit reiciendis ex iste explicabo voluptates eaque possimus, quas nobis odio dolorum natus iusto quia vero tempora sit quidem. Cupiditate est consequuntur fuga, qui incidunt quia soluta, eveniet natus nobis, reprehenderit veritatis a nulla officiis libero laudantium corrupti. Consequuntur dolor nostrum est a error recusandae tempore voluptate debitis dignissimos possimus iusto atque aliquam molestiae quisquam eveniet odit sapiente aut quidem repellat, doloribus explicabo in culpa tempora. Numquam voluptatum velit et ab consequatur magni fugit voluptate inventore amet, dolor aliquid, iure recusandae fugiat minima ex quae error doloribus quidem? The end
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, numquam. The end
CSS 
.overflow_clip {
    width: 100%;
    overflow: clip;
    overflow-clip-margin: 2em;
    height: 20vh;
}

Example 6 (overflow-auto)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores incidunt enim fugit velit reiciendis ex iste explicabo voluptates eaque possimus, quas nobis odio dolorum natus iusto quia vero tempora sit quidem. Cupiditate est consequuntur fuga, qui incidunt quia soluta, eveniet natus nobis, reprehenderit veritatis a nulla officiis libero laudantium corrupti. Consequuntur dolor nostrum est a error recusandae tempore voluptate debitis dignissimos possimus iusto atque aliquam molestiae quisquam eveniet odit sapiente aut quidem repellat, doloribus explicabo in culpa tempora. Numquam voluptatum velit et ab consequatur magni fugit voluptate inventore amet, dolor aliquid, iure recusandae fugiat minima ex quae error doloribus quidem? The end
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, numquam. The end

References

MDN: overflow