CSS Overflow

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Overflow

CSS Overflow is a powerful property in Cascading Style Sheets (CSS) that allows you to control how content is displayed when it exceeds the boundaries of its container. It can be used to create scrolling effects, hide overflowing content, or even create responsive designs. The overflow property can be applied to any block-level element, including the body element.

When an element’s content exceeds the size of its container, the overflow property can be used to determine how the content is handled. By default, the overflow property is set to visible, which means that the content will be visible even if it exceeds the boundaries of its container. This is often undesirable, as it can lead to content being cut off or distorted. To prevent this, the overflow property can be set to hide, which will cause the content to be hidden if it exceeds the boundaries of its container.

The CSS overflow property controls what happens to content when an element’s content is too big to fit in its block formatting context — in both directions. This property can take the following values:

[ visible | hidden | clip | scroll | auto ]

p {
    overflow: scroll; /* content is scrolled */   
}

In addition to the overflow property, there are other properties that can be used to control how content is displayed when it exceeds the boundaries of its container. These include the overflow-x and overflow-y properties, which can be used to control the overflow in the horizontal and vertical directions, respectively.