CSS - overflow-y Property

CSS overflow-y property determines how the content of a block-level element is displayed when it exceeds the element's top and bottom edges.

Possible Values

  • visible − The overflow content is displayed outside the element's boundaries.

  • hidden − The content is clipped, and any overflow is not visible.

  • clip − The content of an element is clipped ,and does not overflow the element's top and bottom edges.

  • scroll − The element is made scrollable by adding a scroll bar.

  • auto − A scroll bar is added to the element so that the user can view its overflow content.

Applies to

All the HTML elements.

DOM Syntax

object.style.overflowY = "visible|hidden|clip|scroll|auto";

CSS overflow-y - With visible & hidden Values

Following example demonstrates, when overflow-y property is set to visible it allows content to overflow its padding box at the top and bottom edges, or when set to hidden, it hides any content that overflows.

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-y-visible {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: visible;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-y-hidden {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: hidden;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-y-visible">
         <h4>Tutorialspoint CSS Overflow-y Visible</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
      <div class="overflow-y-hidden">
         <h4>Tutorialspoint CSS Overflow-y Hidden</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
   </div>
</body>
</html>

CSS overflow-y - clip Value

The overflow-y: clip property hides any vertical overflow that exceeds the padding box of an element. No scrollbars are added.

Example

Here is an example −

<html>
<head>
<style>
   div.overflow-y-clip {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: clip;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow-y-clip">
      <h4>Tutorialspoint CSS Overflow-y Clip</h4>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
   </div>
</body>
</html>

CSS overflow-y - With scroll & auto Values

The overflow-y property can be set to scroll or auto. The scroll value adds a scrollbar to the element if its content overflows its top and bottom edges.

The auto value adds a scrollbar to the element only if its content overflows its top and bottom edges.

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-y-scroll {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: scroll;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-y-auto {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-y: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-y-scroll">
         <h4>Tutorialspoint CSS Overflow-y Scroll</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
      <div class="overflow-y-auto">
         <h4>Tutorialspoint CSS Overflow-y Auto</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
   </div>
</body>
</html>
Advertisements