Learn CSS overflow in 3 minutes! 🌊

hey what's going on everybody today I'm going to explain the Overflow property in CSS the Overflow property sets the defined behavior when content does not fit in the parent element box meaning it overflows there's five states visible hidden clip scroll and Auto here's an example let's create a div element then within this development I'll create a paragraph I'll generate some text then going to our style sheet I'll take our div then give the stiff a border of 2 pixel solid I'll also limit the height height 75 pixels now we have a problem the content of our paragraph is overflowing out of our div we have a couple different ways of handling this with the Overflow property by default overflow is set to visible there is going to be no apparent change basically we're stating if any Inner Elements will overflow allow it to do so that's why you see this text overflow out of our box our second state is hidden with hidden any content that will overflow outside of our box will be hidden we can no longer see it however we can still interact with it for example if I were to copy and paste all of this text foreign well we still have the full text available now clip clip is very similar to Hidden there's no apparent change with overflow set to clip it's used in tandem with the Overflow clip margin property using this property we can set how far this content displays or overflows outside of the box if I were to set overflow to be 13 pixels this content will overflow by this amount 13 pixels then the rest is hidden it's very similar to Hidden but it's used alongside overflow clip margin then we have scroll with scroll our box contains a scroll bar both vertical and horizontal we can use the scroll bar to see the entire length of our content if there's not enough content within this container for example I'll delete most of these words well we still have that scroll bar although it's disabled if you set overflow to auto if you don't need the scroll bar either horizontal or vertical it won't be displayed until you do need it so let me undo these changes now that scroll bar is displayed that's the use of overflow Auto all right everybody so that's the Overflow property it sets the behavior for a parent element when the content doesn't quite fit you can set this property to be visible hidden clip scroll or Auto and that is the Overflow property in CSS foreign

Channel: Bro Code

Views: 8,266

Keywords: CSS overflow, CSS visible, CSS hidden, CSS clip, CSS scroll, CSS auto

Id: d7cH8geV2dY

Length: 3min 23sec (203 seconds)

Published: Thu Sep 21 2023