How to allow vertical scroll on a container and horizontal overflow on the children at the same time?

Question

I have a scrollable div with many items which take >100% of viewport height. This scrollable div must allow:

vertical scrolling
elements outside of the container (horizontal overflow)

Attempts and results:

When overflow = auto (.el-list), the container is scrollable but children (.item) are hidden when outside of the width of the container
When overflow = visible, not scrollable but overflow happens.

This does not semm to work because x and y are not treated independently (the idea is to allow scroll y but still have x overflow)

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

This answer explains why:

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.

Setting position: fixed on the overflowing children allows it to overflow, but it ignores positioning to the parent entirely. and as expected sticky and static ignore also the left: positioning.
same approach as 1-2 but with .item rendered via :after/:before doesn't change the result

Code structure: (Jsfiddle)

.el-list {
 position: relative; 
 height: 100%
 width: 200px;
 overflow: auto; // treated as hidden
}

.item  { 
  position: relative;
}

.overlay-item {
  position: absolute;
  left: -50px;
}

   <div class="el-list">
     <div class="item"><div class="overlay-item"></div></div>
     <div class="item"><div class="overlay-item"></div></div>
   </div>

Is there a way to achieve the expected behavior at least on webkit browsers (mobile webviews)?

...ideally including the older android webview in android 4.*?

Edit: css-tricks solution is interesting: no positioning except container's parent (bigger in width than parent ie el-list itself) seems promising but not practical when there are several anscestors

(there must be a reason why positioning ancestors is the foundation of dom element flow on the first place :-)! )

For refernce the HTML looks like this:

   <div class="el-list-parent"> <!-- parent of scrollable div -->
       <div class="el-list">
         <div class="item"><div class="overlay-item"></div></div>
         <div class="item"><div class="overlay-item"></div></div>
       </div>
    </div>

score 0 · Answer 1 · answered Apr 30 '21 at 11:50

There seem to be 2 solutions to the problem I explained:

the css-tricks approach (set positioning relative to the window via javascript)

making the parent (.el-list) without padding (in my case there was padding I could use to make the parent larger)
compensate the missing parent's padding by applying it on its children (padding-left or padding-right where we want to have space but also horizontal overflow)

How to allow vertical scroll on a container and horizontal overflow on the children at the same time?

1 Answers1