Is there a way to allow scrolling in only one direction using CSS?

Question

Is there a way to allow scrolling in only one direction using CSS?

I am facing an issue with resizing elements within a list. The requirement is that when the elements are resized, they should overflow the container only in the x direction. There must not be any scrolling in the x direction, but scrolling should be allowed in the y direction.

I have attempted to use the following CSS:

overflow-x: visible;
overflow-y: scroll;

However, this results in scrolling being enabled in both directions.

Is there a way to prevent this behavior?

Check out this example on JSFiddle for reference.

The answers provided in the response to CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue explain the root cause of the problem but do not offer a solution in case of using scroll.

While this behavior aligns with the spec, I am searching for workarounds to address this specific scenario.

html css scroll

Answer 1

Answer №1

A common issue arises when using

overflow-x: visible; overflow-y: scroll

in CSS. This combination is not supported, as whenever visible is paired with scroll, it is automatically converted to auto.

To put it simply, the following two sets of declarations are essentially the same:

overflow-x: visible;
overflow-y: scroll;

overflow-x: auto;
overflow-y: scroll;

While this may seem like a flaw in the specification, there are ways to work around it.

One workaround involves setting the expanding elements to position: absolute. By doing so, their size will not affect the container and they won't be clipped by overflow: hidden. To position them correctly, an additional wrapping div with position: relative is added around the main container.

Here is an example of HTML code that implements this workaround:

<div class='container1'>
  <div class='container2'>
    <ul class='messages'>
      <li><pre>Hello</pre></li>
      <li>
        <pre>This is a 
      really really really 
      really really long message.</pre>
      </li>
      <li><pre>World</pre></li>
    </ul>
  </div>
</div>

Additionally, the necessary CSS styles for this setup can be found below:

* {
  margin: 0;
  padding: 0;
}

.container1 {
  position: relative; 
  width: 200px;
}

.container2 {
  background: #f0f;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.messages {
  overflow: visible;
  list-style: none;
}
// Remaining CSS styles omitted for brevity

You can view a working demo of this implementation through the provided Fiddle link: https://jsfiddle.net/cyL6tc2k/2/

Credit goes to the technique described at:

Answer 2

A common issue arises when using

overflow-x: visible; overflow-y: scroll

in CSS. This combination is not supported, as whenever visible is paired with scroll, it is automatically converted to auto.

To put it simply, the following two sets of declarations are essentially the same:

overflow-x: visible;
overflow-y: scroll;

overflow-x: auto;
overflow-y: scroll;

While this may seem like a flaw in the specification, there are ways to work around it.

One workaround involves setting the expanding elements to position: absolute. By doing so, their size will not affect the container and they won't be clipped by overflow: hidden. To position them correctly, an additional wrapping div with position: relative is added around the main container.

Here is an example of HTML code that implements this workaround:

<div class='container1'>
  <div class='container2'>
    <ul class='messages'>
      <li><pre>Hello</pre></li>
      <li>
        <pre>This is a 
      really really really 
      really really long message.</pre>
      </li>
      <li><pre>World</pre></li>
    </ul>
  </div>
</div>

Additionally, the necessary CSS styles for this setup can be found below:

* {
  margin: 0;
  padding: 0;
}

.container1 {
  position: relative; 
  width: 200px;
}

.container2 {
  background: #f0f;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.messages {
  overflow: visible;
  list-style: none;
}
// Remaining CSS styles omitted for brevity

You can view a working demo of this implementation through the provided Fiddle link: https://jsfiddle.net/cyL6tc2k/2/

Credit goes to the technique described at:

Answer 3

Answer №2

When the content overflows vertically, a scrollbar is automatically inserted for horizontal scrolling. Browsers adjust the overflow settings to allow for horizontal scrolling without overlapping the scrollbar.

To prevent this issue, you can create another container for all the content and set it with a wider width than the overflowed content inside. The height of this new container should match the inner elements and have a vertical scroll:

HTML

<div class='container3'><!-- Add a parent container -->
  <div class='container'>
    ...
  </div>
</div>

CSS

/* Parent container */
.container3 {
  /* Set maximum height before enabling scrolling */
  height: 200px;

  /* Enable vertical scroll if needed */
  overflow-y: auto;
}

FIDDLE

Check out the Fiddle here

Answer 4

When the content overflows vertically, a scrollbar is automatically inserted for horizontal scrolling. Browsers adjust the overflow settings to allow for horizontal scrolling without overlapping the scrollbar.

To prevent this issue, you can create another container for all the content and set it with a wider width than the overflowed content inside. The height of this new container should match the inner elements and have a vertical scroll:

HTML

<div class='container3'><!-- Add a parent container -->
  <div class='container'>
    ...
  </div>
</div>

CSS

/* Parent container */
.container3 {
  /* Set maximum height before enabling scrolling */
  height: 200px;

  /* Enable vertical scroll if needed */
  overflow-y: auto;
}

FIDDLE

Check out the Fiddle here

Answer 5

Answer №3

The reason for this issue is because of your usage of the "pre" element, which comes with default values on certain web browsers:

    pre {
       display: block;
       font-family: monospace;
       white-space: pre;
       margin: 1em 0;
    }

You have two possible solutions: either replace all instances of "pre" with "p" (paragraph), or adjust the white-space property of the "pre" element by including this line:

    pre { white-space: normal; }

Answer 6

The reason for this issue is because of your usage of the "pre" element, which comes with default values on certain web browsers:

    pre {
       display: block;
       font-family: monospace;
       white-space: pre;
       margin: 1em 0;
    }

You have two possible solutions: either replace all instances of "pre" with "p" (paragraph), or adjust the white-space property of the "pre" element by including this line:

    pre { white-space: normal; }

Answer 7

Answer №4

While I'm not certain if there is a more optimal solution available, I managed to devise a somewhat fragile and unconventional method to tackle this issue. It may not be perfect, but it could serve as a stepping stone towards a potentially improved solution in the future.

The essence of this solution lies in utilizing position: absolute; without specifying values for top, right, bottom, or left on the desired item with overflow: visible, while setting its parent to overflow: scroll;.

An absolutely positioned element with undefined absolute values behaves somewhat between the static and absolute positions I aimed for, creating an interesting combination.

EXPLORE CODEPEN DEMO:

Codepen Demo

HTML STRUCTURE:

<div class="wrapper">
  <div class="inner-wrapper">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item" id="dropdown">
      Hover me
      <div class="menu">Menu</div>
    </div>
  </div>
</div>

CSS STYLING:

.wrapper {
  background: blue;
  height: 64px;
  width: 250px;
  padding: 2px;
}

.inner-wrapper {
  overflow-x: scroll;
  display: flex;
  height: 100%;
}

.item {
  background: white;
  margin-right: 2px;
  width: 60px;
  height: 100%;
  flex-shrink: 0;
}

#dropdown .menu {
  background: pink;
  height: 0px;
  position: absolute;
  display: none;
}

#dropdown:hover .menu {
  height: 100px;
  z-index: 1;
  display: block;
  margin-left: -58px;
}

I also shared a brief video snippet illustrating the challenge I was attempting to address on Twitter

Answer 8

While I'm not certain if there is a more optimal solution available, I managed to devise a somewhat fragile and unconventional method to tackle this issue. It may not be perfect, but it could serve as a stepping stone towards a potentially improved solution in the future.

The essence of this solution lies in utilizing position: absolute; without specifying values for top, right, bottom, or left on the desired item with overflow: visible, while setting its parent to overflow: scroll;.

An absolutely positioned element with undefined absolute values behaves somewhat between the static and absolute positions I aimed for, creating an interesting combination.

EXPLORE CODEPEN DEMO:

Codepen Demo

HTML STRUCTURE:

<div class="wrapper">
  <div class="inner-wrapper">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item" id="dropdown">
      Hover me
      <div class="menu">Menu</div>
    </div>
  </div>
</div>

CSS STYLING:

.wrapper {
  background: blue;
  height: 64px;
  width: 250px;
  padding: 2px;
}

.inner-wrapper {
  overflow-x: scroll;
  display: flex;
  height: 100%;
}

.item {
  background: white;
  margin-right: 2px;
  width: 60px;
  height: 100%;
  flex-shrink: 0;
}

#dropdown .menu {
  background: pink;
  height: 0px;
  position: absolute;
  display: none;
}

#dropdown:hover .menu {
  height: 100px;
  z-index: 1;
  display: block;
  margin-left: -58px;
}

I also shared a brief video snippet illustrating the challenge I was attempting to address on Twitter

Answer 9

Answer №5

Consider experimenting with setting overflow-y to hidden

Answer 10

Consider experimenting with setting overflow-y to hidden

Is there a way to allow scrolling in only one direction using CSS?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to link buttons to specific drop down sections?

Variations in the implementation of responsive web design on laptops versus mobile devices

Ways to align a button in the center using Material-UI

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

Is there a way for me to achieve a vertical page turning effect on a single page?

Is there a way to retrieve the value of a dropped file in a file input using jQuery?

Setting the Default Value for Dropdown Options in Angular 2

Resizing a column to match the dimensions of a grid of pictures

Rearrange information when the textarea is adjusted in size

Activate Dropdown on hover and automatically close the menu when a link is clicked

What is the method for creating a loop that includes a radio-like button?

Modifying the HTML Structure in Yii's CListView

Fade effects on hover with a changing background color

Exploring ways to create a dynamic background image that allows the rest of the page to float over seamlessly

Adjust the content column in the form to be mobile-friendly

What is the best way to implement a responsive layout in Bootstrap 5?

React NextJS CSS - Setting the section's height to 100% of the parent's height results in taking up 100% of the page's height

Issue with XAMPP: Editing PHP file does not update displayed content in browser

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

Manipulate form fields via jQuery in Django to dynamically hide or show them based on certain