The property specifies what to do in the case the content is to fit in the container box. It specifies if a should appear, or if the content gets . CSS overflow too large scrollbar clipped The overflow property is a shorthand for overflow-x and overflow-y. The overflow-x property specifies handling the overflow in the horizontal direction, while overflow-y specifies handling the overflow in the vertical direction. When learning about this, it is useful to know a little something more about . positioning Values The overflow property can have different values: — content can be rendered outside of the box, Visible — content gets clipped and no scrollbars are shown, Hidden — content gets clipped and necessary scrollbars are shown, Scroll — the browser determines how it will handle the content, it can vary from browser to browser, but generally, scrollbars appear as required. Auto The overflow property applies only to the . block, inline-block and table elements Syntax The following syntax is used for defining the overflow property: div { overflow: hidden; } Examples Now, let’s back this theory up with some examples. When working with text, it should have a proper . formatting HTML <div>  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p></div> CSS div {  height: 200px;  width: 200px;  border: solid thin blue;  background-color: #fafafa;  overflow: visible;} In the example above, I have set the and the content outside of the containing box. overflow to visible spills HTML <div>  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p></div> CSS div {  height: 200px;  width: 200px;  border: solid thin blue;  background-color: #fafafa;  overflow: hidden;} In the second example, I have set the . The content is and are visible. overflow property to hidden clipped no scrollbars HTML <div>  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p></div> CSS div {  height: 200px;  width: 200px;  border: solid thin blue;  background-color: #fafafa;  overflow: scroll;} In the third example, I have set the . In this case, the content outside the container, and . overflow property to scroll spills the scrollbars appear HTML <div>  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p></div> CSS div {  height: 200px;  width: 200px;  border: solid thin blue;  background-color: #fafafa;  overflow-y: scroll;  overflow-x: hidden;} Finally, you can see the usage of the property. You see only the , while the . overflow-y vertical scrollbar is visible horizontal scrollbar is hidden In this short tutorial, I have explained the overflow property. Hopefully, it will be of any help when you start your next project. Thank you for reading! Originally published at kolosek.com on May 7, 2018.

Different

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The Guide to CSS Overflow Property

Too Long; Didn't Read

Company Mentioned

Alexandra Mladenovic

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The Guide to CSS Overflow Property

Too Long; Didn't Read

Company Mentioned

Alexandra Mladenovic

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES