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.
