Html/CSS Hack to Allow Overflow-X: Auto & Overflow-Y: Visible

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’
and ‘overflow-y’ are the same as their
specified values, except that some
combinations with ‘visible’ are not
possible: if one is specified as
‘visible’ and the other is ‘scroll’ or
‘auto’, then ‘visible’ is set to
‘auto’. The computed value of
‘overflow’ is equal to the computed
value of ‘overflow-x’ if ‘overflow-y’
is the same; otherwise it is the pair
of computed values of ‘overflow-x’ and
‘overflow-y’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

overflow-x: scroll and overflow-y: visible alternative

This is actually a complex and long-standing problem. Solving it with CSS alone is not feasible.

The trick is to pluck the active element out from the static context and force it to be fixed to the viewport when hovered over. I tried to boil this down to a minimal reproducible example but the more I hacked away at it the more quirks I encountered. With fixed image sizes you can accomplish this with a pretty minimal amount of scripting but there are some usability issues and the more of them I fixed, the more complex the code got.

Ultimately, what I ended up doing was publishing a custom element that handles all of this automagically.

Using it is dead simple:

over-scroll {
  width: 50%;
  margin: 3rem auto;
}

pop-out img {
  height: 100px;
  width: auto;
}

<script type="module" src="https://bes.works/bits/bits/pop-out.js"></script>
<over-scroll>
  <pop-out><img src="https://picsum.photos/720/480"></pop-out>
  <pop-out><img src="https://picsum.photos/480/720"></pop-out>
  <pop-out><img src="https://picsum.photos/500/500"></pop-out>
  <pop-out><img src="https://picsum.photos/640/480"></pop-out>
</over-scroll>

Combine overflow-y: auto and overflow-x: visible

You can use a wrapper element and float it to the left which will take it out of the normal document flow. This floated element will then be as large as its content, which will get you the x-axis stretch/overflow but not the y-axis scroll. To get the y-axis scroll set a height and overflow controls on the floated wrapper.

/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */

.cf:before,

.cf:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}

.cf:after {

    clear: both;

}

.container {

  width: 200px;

  /* Following two properties, for demo, so you can see the container. */

  min-height: 400px;

  background-color: pink;

}

.img-wrap {

  float: left;

  height: 200px;

  overflow-y: scroll;

}

img {

  width: 400px;

  height: 400px;

}

<div class="container cf">

  

  <div class="img-wrap">

    <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

  </div>

  

  <p>

    Lorem ipsum dolor.

  </p>

  

</div>

How to make overflow-y scroll without changing overflow-x to auto?

I've solved this by adding 'div' between 'div' and 'ul'.

And here's my final fiddle which works almost fitting with my intent.

<div class="panel">         // added div

I hope this working will be helpful for anybody. :)

overflow-x:hidden still can scroll

I don't think there's any way to prevent scrolling of an element without using JavaScript. With JS, though, it's pretty easy to set scrollLeft to 0 onscroll.

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

Creating a site wrapper div inside the <body> and applying the overflow-x:hidden to the wrapper instead of the <body> or <html> fixed the issue.

It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.

Note: You may also need to add position: relative to the wrapper div.