I have three sections stacked vertically. The second section happens to be very wide, and causes the page to overflow horizontally. See this initial jsfiddle, with the aforementioned simple setup:
https://jsfiddle.net/cksam7q2/4/
<div class="container">
<div class="section" style="border: 3px dotted lightblue;">
Section 1
</div>
<div class="section" style="border: 3px dotted lightpink">
Section 2
<div style="width: 2500px; height: 500px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet justo donec enim diam vulputate ut. Et odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Gravida neque convallis a cras semper auctor. Scelerisque fermentum dui faucibus in ornare quam. Odio euismod lacinia at quis. Est sit amet facilisis magna. Sit amet nulla facilisi morbi tempus. Id velit ut tortor pretium viverra suspendisse potenti nullam. Consequat nisl vel pretium lectus quam id. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Sed odio morbi quis commodo odio aenean.
</div>
</div>
<div class="section" style="border: 3px dotted lightgreen;">
Section 3
</div>
</div>
Note that in the above fiddle/code, you can see that the horizontal scrollbar appears at the bottom of the page. It seems to be displayed by the browser, because all elements in the page have the default overflow: visible which in theory doesn't show scrollbars.
Now, if I want to make Section 1 stick to the top as the page scrolls vertically, I just need to add to it: position: sticky; top: 0 see the following fiddle:
https://jsfiddle.net/cksam7q2/5/
Now here is the problem: instead of making section 1 stick to the top when scrolling vertically, I want it to stick to the left when scrolling horizontally, to achieve the effect of the other sections scroll horizontally underneath while section 1 stays. I would expect it should be as simple as adding to section 1: position: sticky: left: 0, but that doesn't work, then Section 1 scroll horizontally together with the other sections, see the following fiddle:
https://jsfiddle.net/cksam7q2/6/
The only way I've got it to work is by adding overflow-x: auto to the outer container div. Then Section 1 sticks to the left and doesn't scroll horizontally, while the other sections do scroll horizontally, check the following fiddle:
https://jsfiddle.net/cksam7q2/9/
But that solution is suboptimal: what happened is that I moved the scroll bar from the page to the container div, as you can see in the fiddle (I added an additional Footer section at the same level of container to highlight that the scroll bar belongs to container)
Why doesn't position: sticky: left: 0 work just like position: sticky; top: 0 ? Is there a way to make it work with the horizontal scrollbar set by the browser at the bottom, without having to be specific about the container with the horizontal scroll with the overflow-x: auto trick in the container that holds the section?
