Overflow

First Published On:

April 25, 2024

Last Updated:

July 21, 2024

Figure 1. Animation demonstrating state layer implementation.

No items found.

Overview

Overflow controls how to handle it when a child is larger than its parent element. By default, overflow is always set to visible. That's true across all browsers.

To control how content overflows, assign these classes to the parent of the child that's overflowing.

Class Name	CSS Properties
`.overflow__hidden`	`overflow: hidden;`
`.overflow__visible`	`overflow: visible;`
`.overflow__scroll`	`overflow: scroll;`
`.overflow__auto`	`overflow: auto;`

Recommended Usage

Customization

Resources that mention this topic

No items found.

info

Get Help from a LiftKit Expert

arrow_forward

Book Quick Chat

Give Us Feedback

Click or tap to reveal form.

expand_more

check_circle

Success! An email has been sent to you with more details.

Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.

error

Error: Something went wrong. Email info@chainlift.io directly for assistance.

.overflow__hidden {
  overflow: hidden;
}

.overflow__visible {
  overflow: visible;
}

.overflow__scroll {
  overflow: scroll;
}

.overflow__auto {
  overflow: auto;
}

content_copy

code snippets will appear here

Theme Setup

Building a Layout

Arranging Content

Styling Elements

LiftKit Components

Overflow

Overview

Recommended Usage

Customization

Resources that mention this topic

Get Help from a LiftKit Expert

Give Us Feedback