CSS - overflow-x Property

CSS overflow-x property specifies that the content of an element overflows its left and right edges and overflow in the horizontal direction.

Possible Values

visible − An element is allowed to overflow the element's left and right edges.
hidden − Any content that overflows horizontally will be clipped and not displayed.
clip − The content of an element is clipped ,and does not overflow the element's left and right edges.
scroll − Adds the horizontal scrollbar to the element.
auto − A horizontal scrollbar is added to the element only when the content overflows its left and right edges.

Applies to

All the HTML elements.

DOM Syntax

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

CSS overflow-x - With hidden & visible Values

The following example demonstrates how to use overflow-x property with hidden snd visible values −

<html>
<head>
<style>
   .container {
      display: flex;
   }
   div.overflow-x-visible {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 60px;
      overflow-x: visible;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-x-hidden {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 60px;
      overflow-x: hidden;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-x-visible">
         <h4>Tutorialspoint CSS Overflow-x Visible</h4>
         omnis dolor repellendus. non-characteristic words.
      </div>
      <div class="overflow-x-hidden">
         <h4>Tutorialspoint CSS Overflow-x Hidden</h4>
         omnis dolor repellendus. non-characteristic words.
      </div>
   </div>
</body>
</html>

CSS overflow-x - clip Value

When the overflow-x property is set to clip, the content of an element is clipped at the element's padding box at the left and right edges.

<html>
<head>
<style>
   div.overflow-x-clip {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 60px;
      overflow-x: clip;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow-x-clip">
      <h4>Tutorialspoint CSS Overflow-x Clip</h4>
      omnis dolor repellendus. non-characteristic words, Temporibus.
   </div>
</body>
</html>

CSS overflow-x - With scroll & auto Values

The CSS overflow-x property can be set to scroll or auto. Scroll will add a scrollbar to an element when its content overflows its width, while auto will only add a scrollbar if the content overflows its width.

Here is an example −

<html>
<head>
<style>
   .container {
      display: flex;
   }
   div.overflow-x-scroll {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 70px;
      overflow-x: scroll;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-x-auto {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 70px;
      overflow-x: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-x-scroll">
         <h4>Tutorialspoint CSS Overflow-x Scroll</h4>
         omnis dolor repellendus. non-characteristic words.
      </div>
      <div class="overflow-x-auto">
         <h4>Tutorialspoint CSS Overflow-x Auto</h4>
         omnis dolor repellendus. non-characteristic words.
      </div>
   </div>
</body>
</html>