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

Question

I have a list which is rendering images (horizontally with scroll):

<div id="my-cool-wrapper">
  ...
  // My cool wrapper has more elements (apart from list)

  <ul id="the-list" style="display: flex; flex-direction: row; overflow-x: scroll;">
    <li>
      <img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
    </li>

    <li>
      <img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
    </li>

    <li>
      <img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
    </li>
  </ul>
</div>

I would like to transform: scale(1.5) the images on user interaction (e.g. click, hover, etc).

The problem:

• The images do not overflow outside the parent. I want the images to be fully visible when growing (even if it's outside the list's height).

I thought I could achieve this by setting overflow-y: visible to #the-list. However, according to the CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue thread this is not possible.

Is there any alternative to achieving what I want?

Update: A JSFiddle is available to demonstrate the issue: http://jsfiddle.net/f7vdebt2/

I would like for the content of the <ul> to be able to scale beyond its parent boundaries.

Answer 1

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>

Or you could import the element classes into a script and create them programatically:

import { OverScrollElement, PopOutElement } from './pop-out.js';

let overScroll = new OverScrollElement();
let popOut = new PopOutElement();
popOut.innerHTML = `<h1> Hello! </h1>`;
overScroll.append(popOut);
document.body.append(overScroll);

There's a test page included in the repository and a live demo on my website with additional examples. This should do the trick for you but let me know if there are any tweaks you would need to suit your specific use case.