Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css

What is CSS Overflow?

Shahpar Khan

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

While designing a webpage, it is possible that the content in one of the elements of your HTML will overflow and overtake the size of that particular element. In this scenario, we can carefully cater to the overflowed content using the overflow CSS property. Below are the different values you can assign to the overflow property.

overflow: visible

This is the overflow property’s default value – it lets the content flow out of the box:

overflow: hidden

Assigning hidden to overflow essentially clips the content that flows outside the size of the box. The content can be scrolled programmatically (i.e., by setting the value of a property like, offsetLeft), so the element is still a scroll container:

overflow: scroll

When scroll is assigned to overflow, a scrollbar is permanently added next to the content. The scrollbar lets you toggle the hidden content:

Use the overflow-y and overflow-x properties instead of overflow to set a scrollbar for only the vertical or horizontal content.

overflow: auto

The auto value is similar to the scroll value, the only difference is that auto only adds a scrollbar when there is a need. If the content doesn’t exceed the dimensions of the box, a scrollbar is not added:

RELATED TAGS

css

CONTRIBUTOR

Shahpar Khan
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring