How do I enable scrolling only in one direction in CSS?

css overflow
auto scroll css
css always show horizontal scrollbar
scroll css-tricks
scroll container css
horizontal overflow: hidden
overflow width

I have a list with some resizing elements. When the elements are resized, they should overflow the container in the x direction. There should never be scrolling in the x direction. Scrolling should be enabled in the y direction.

I have tried setting:

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

But this seems to enable scrolling in both directions.

How do I prevent this?

https://jsfiddle.net/64tw8rqe/


The answers to CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue explain the underlying problem but not a work-around in the case of scroll.


This behaviour is in accordance with the spec. I am looking for work-arounds.

The problem is that overflow-x: visible; overflow-y: scroll is an impossible combination in CSS. Whenever visible is paired with scroll, it is converted to auto. In other words, these are equivalent:

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

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

It was a poor descision for the spec, but there are work-arounds.

By making the expanding elements position: absolute, their size will not change the container, and they will not be clipped by overflow: hidden. To get them positioned correctly, an extra div with position: relative is wrapped around the whole container.

HTML:

<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>

CSS:

* {
  margin: 0;
  padding: 0;
}

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

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

.messages {
  overflow: visible;
  list-style: none;
}

.messages li {
  background: #ff0;
  width: 100%;
  height: 24px;
  margin-top: 12px;
}

.messages li pre {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  max-height: 24px;
  padding: 4px;
  background: #0ff;
  border-radius: 4px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
  min-width: 100%;
  max-width: 100%;
  transition: max-width 200ms ease-out, height 200ms ease-out;
}

.messages li pre:hover {
  z-index: 1;
  background: #00f;
  max-width: 80vw;
  max-height: 80vh;
  transition: max-width 200ms ease-in, max-height 200ms ease-in;
}

Fiddle:

https://jsfiddle.net/cyL6tc2k/2/

Credit to the trick found here: http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent

How do I enable scrolling only in one direction in CSS?, Scrolling should be enabled in the y direction. I have tried setting: overflow-x: visible; overflow-y: scroll; But this seems to enable scrolling in both directions. The overflow-x and overflow-y CSS attributes control the horizontal and vertical scrollbars. This is useful when you only need to scroll in one direction. With the overflow-* attributes, you can hide the horizontal or vertical scrollbars. div.disabled { overflow-x: hidden; //horizontal overflow-y: scroll; //vertical }

When you have vertical overflow, a scrollbar is added to the horizontal flow (to the right). Elements will not overlay that scrollbar so browsers change your overflow settings to scroll horizontally instead.

What you will need to do is add another container around all of the content and set it to have a greater width that all of the overflowed content inside but a height of the inner element and vertical scroll:

HTML

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

CSS

/* A parent container */
.container3 {
  /* The maximum height of your inner content before scrolling is enabled */
  height: 200px;

  /* Enable the vertical scroll if we have enough content */
  overflow-y: auto;
}

FIDDLE

https://jsfiddle.net/cL8hr7ot/

Visible overflow in one direction with scrolling in the other direction , Visible overflow in one direction with scrolling in the other direction - css. And this is what it should look like here, only with scrolling. 300}} onMouseEnter={()​=> { // we're over the extend-area, so disable scroll-container mouse events  Allows a straight jump "scroll effect" between elements within the scrolling box. This is default: smooth: Allows a smooth animated "scroll effect" between elements within the scrolling box. initial: Sets this property to its default value. Read about initial: inherit: Inherits this property from its parent element. Read about inherit

This is due to your usage of "pre", which has some default values on some browsers :

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

You have two options : change all the "pre" by "p" (paragraph) or rewrite the white-space property of pre, by adding this :

    pre { white-space: normal; }

The CSS Overflow Property, Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don't need them. Float Clearing. One more popular uses of  My most popular open source project is Smooth Scroll, a script that lets you animate scrolling with anchor links. Today, I want to show you how to achieve the same effect with only CSS. I’ll also talk about when and why you might want to use a JavaScript version anyways. Scroll Behavior The scroll-behavior CSS property tells the browser how to handle scrolling triggered by anchor links and such.

Not sure if there is a better answer elsewhere but I did come up a very brittle/hacky solution to this problem. It uses some magic numbers in my example but I think it could be the starting point of a somewhat better answer in the future.

This solution boils down to using position: absolute; without any values for top, right, bottom, or left on the item you want to be overflow: visible and setting it's parent to overflow: scroll;.

The default behaviour of an absolutely positioned element without any absolute values is in between the static and absolute positioned world I want it to be in, sort of.

CODEPEN

Codepen

HTML

<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

.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 posted a small video clip of the problem I was trying to solve for on Twitter

CSS overflow-x property, The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left  But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site! I’d be nice if we could do something like this: /* This isn't real */ div { scroll-direction: horizontal; } Unfortunately, that’s not going to happen. It’s not even on the roadmap for CSS.

Try changing overflow-y: hidden

Disable or Enable Horizontal or Vertical Scrollbar - CSS, This is useful when you only need to scroll in one direction. With the overflow-* attributes, you can hide the horizontal or vertical scrollbars. The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.

overflow: hidden - overflow, The overflow shorthand CSS property sets what to do when an element's content scrollTop property may be used to scroll an HTML element even when Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g.,  CSS-Tricks * is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That's a good thing! I've used WordPress since day one all the way up to v17, a decision I'm very happy with. I also leverage Jetpack for extra functionality and Local for local development.

-webkit-overflow-scrolling, The -webkit-overflow-scrolling CSS property controls whether or not Indicates the addition of support for one-finger accelerated scrolling to all  The scroll-behavior property in CSS allows us to define whether the scroll location of the browser jumps to a new location or smoothly animates the transition when a user clicks a link that targets an anchored position within a scrolling box.

How to set up a vertical scroll inside a div - HTML & CSS, I tried with this one also, but it also could not create the vertical scroll. Try just using The overflow-y CSS property sets what shows when content overflows a border: 0.062em solid #999; background-color: #fff; overflow: auto; direction: rtl;​  On our container, we want to turn off vertical scrolling (overflow-y) and enable horizontal scrolling (overflow-x). Then with each card, we want to set it to display with inline-block so they all display in a row. The line of CSS you probably are unfamiliar with is white-space: nowrap. This property is used to control how text wraps around a

Comments
  • Possible duplicate of CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  • Is the x direction supposed to scroll when .messages is hovered over?
  • No. The message should go outside and over the container, like when scroll is disabled in both x and y.
  • The closest solution I've found is in this CSS Trick
  • This does not solve the problem. It only makes the container so big that the contents do not trigger scrolling.
  • Vertical scrolling is triggered, I thought you didn't want horizontal scrolling?
  • I don't want horizontal scrolling. The problem is that the solution requires a container wide enough to fit the content. What if I have another element positioned next to it?
  • You'll need to work out a solution using positioning and z-index, but in that case, where do you expect the scrollbar to be? That layout would be very confusing. The browser won't overlay your content on top of a scrollbar so you can only move it further right.
  • I do not want to lose the formatting of my messages.
  • Well then I lose the scrolling in the y direction.
  • How about trying to make overflow-x: auto and overflow-y: visible, but in addition expanding your page width, the container