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

Question

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.

Answer 1

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;

Perhaps it was a poor decision 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