Overflow Property in CSS


This overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Value used for
visible This overflow is not clipped. It renders outside the element's box. This is default.
auto This overflow is clipped, a scroll-bar should be added to see the rest of the content.
scroll This overflow is clipped, but a scroll-bar is added to see the rest of the content.
overflow This specifies what happens if content overflows an element's box.
overflow-wrap This specifies whether or not the browser can break lines with long words, if they overflow its container.
overflow-x This specifies what to do with the left/right edges of the content if it overflows the element's content area.
overflow-y This specifies what to do with the top/bottom edges of the content if it overflows the element's content area.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
      padding: 10px;
      overflow: visible;
      overflow: hidden;
      overflow: scroll;
     overflow: auto;
     overflow-y: scroll;
     overflow-x: scroll;
    }
    img{
      width: 100%;
    }
  </style>
</head>
<body>
  <h1>Overflow in CSS</h1>
  <div>
    <img src="pic.jpg" alt="">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nam debitis perspiciatis distinctio. Quidem impedit vel nihil amet voluptatibus praesentium vero in fugia
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nam debitis perspiciatis distinctio. Quidem impedit vel nihil amet voluptatibus praesentium vero in fugiat dolore, repellat animi quas! Fugit, aspernatur voluptatem doloremque distinctio culpa blanditiis accusamus aliquam nulla veritatis ipsam facere quod dignissimos nihil eaque libero corporis soluta aliquid dicta quibusdam laboriosam repudiandae numquam voluptas tempore unde! Iure facere deleniti ex, quibusdam rerum cum, odio accusantium neque quisquam libero voluptatibus ut, praesentium vitae ea? Aperiam, quo. Necessitatibus aliquam ratione dignissimos nemo nihil veritatis quis a, at cumque dolorum eum accusantium minus odio, quo corporis illum. Reiciendis amet unde saepe dolor tenetur libero, corrupti placeat eveniet? Ducimus, molestiae? Ducimus numquam rerum excepturi temporibus iste similique ea, quidem ab? Neque enim quidem asperiores quos rerum quisquam itaque maiores adipisci qui expedita id vero quo eveniet aspernatur omnis, natus commodi perspiciatis repellat. Dolores harum fugiat atque blanditiis nostrum rem aspernatur facere illo quaerat quod!
  </div>
</body>
</html>

Output

Background Attachment
Live Preview


CSS Tutorial


Properties Reference


Cascading Style Sheet


Flexbox Tutorial


CSS Grid Tutorial


Transitions Properties


CSS Properties with Examples


CSS Selectors


CSS Pseudo Elements


CSS Attribute Selectors


Input Pseudo Classes


CSS Examples


CSS Animation Projects