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

Overflow Property in CSS

Source Code :

Output

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