Computer >> Computer tutorials >  >> Programming >> CSS

What to do when an element's content might be larger than the amount of space allocated to it?

Use the CSS overflow property to solve this issue of a content exceeding the allocated space. You can try to run the following code to solve the issue −

Example

<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">
            This is Demo Content. This is Demo Content. This is Demo Content.
            This is Demo Content. This is Demo Content. This is Demo Content.
            This is Demo Content. This is Demo Content. This is Demo Content.
            This is Demo Content. This is Demo Content. This is Demo Content.
         </div>
      <br />
   </body>
</html>