Which property is used to tell the browser what to do if the box's content is larger than the box itself?

CSS Web Development Front End Technology

CSS provides a property called overflow which tells the browser what to do if the box's contents are larger than the box itself. This property can take one of the following values −

Value	Description
visible	Allows the content to overflow the borders of its containing element.
hidden	The content of the nested element is simply cut off at the border of the containing element and no scrollbars are visible.
scroll	The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
auto	The purpose is the same as a scroll, but the scrollbar will be shown only if the content does overflow.

Example

You can try to run the following code to implement the overflow property −

<html>
   <head>
   </head>
   <style>
      .scroll{
         display:block;
         border: 2px solid green;
         padding:10px;
         margin-top:10px;
         width:300px;
         height:50px;
         overflow:scroll;
      }
      .auto{
         display:block;
         border: 2px solid green;
         padding:10px;
         margin-top:10px;
         width:300px;
         height:50px;
         overflow:auto;
      }
   </style>
   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how
         scrollbars works if there is an overflow in an element box.
         This provides your horizontal as well as vertical scrollbars.
       </div>
      <br />
      <p>Example of auto value:</p>
      <div class = "auto">
         I am going to keep lot of content here just to show you how scrollbars
         works if there is an overflow in an element box. This provides your
         horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>