Two sticky divs in different directions [duplicate] - html

Question

This question already has answers here:
Why is my element not sticking to the left when using position sticky in css?
(2 answers)
Why isn't position:sticky with left:0 working inside a scrollable container?
(1 answer)
Closed 3 years ago.
I'm trying to make an interface where two parts overlap, and one can scroll through the first part horizontally and the second part vertically. I quickly discovered the css sticky position.
Here is code demonstrating the issue I encountered using position: sticky; :
body {
margin: 0;
}
#d1 {
background: red;
position: sticky;
top: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
left: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
(doesn't work in my browser, here is a jsfiddle https://jsfiddle.net/2bovgy84/1/ )
If you scroll down red div stays on top (what I expect), but if you scroll right blue div gets "stuck" half-way through (but I expect it to behave like the red one does)
I do not understand this behavior, at all.

Answer 1

body needs to be allowed to grow wider than HTML/window's width so it doesn't drag the blue element along with it (backgrounds on html/body shows what happens : https://jsfiddle.net/Lq473pue/1/ ).
you can use for that:
display:inline-block;
display:table;
float:left;
jsfiddle updated : https://jsfiddle.net/Lq473pue/
min-width:100%; can also be handy for body

Answer 2

The body needs the width or you need elements that are not sticky to create that width. Otherwise your body will be the width of the viewport.
https://jsfiddle.net/y9r74c0x/20/
body {
margin: 0;
width: 2000px;
}
#d1 {
background: red;
position: sticky;
bottom: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
right: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>