Как позиционировать липкий див, чтобы придерживаться края в прокручиваемом дивизии? ⇐ CSS

[Anonymous]

В Firefox элемент, стилизованный с позицией: Sticky и отрицательный маржин-end-end , не придерживается ожидаемой позиции внутри своего родителя при прокрутке. Такое поведение отклоняется от Chrome, где позиционирование работает, как и ожидалось. Ошибка подробно описана в этой записи Bugzilla: Mozilla bugzilla #1895739 < /p>
Код для воспроизведения: < /p>
codepen link < /p>
p>

Код: Выделить всё

.parent {
background: lightblue;
width: 800px;
height: 50px;
overflow: scroll;
}

.scroller {
width: 150%;
height: 40px;
background: blue;
border: 1px solid red;
}

.button {
position: sticky;
width: 50px;
height: 20px;
background: green;
border: 1px solid cyan;
}

.back {
inset-inline-start: 1em;
}

.forward {
inset-inline-start: 100%;
translate: calc(-100% - 1em);
margin-inline-end: -100%;
}< /code>

Ожидаемое поведение: .forward div должен появляться в Правильный край /p>
Кстати, он также работает правильно в Firefox, если я помесчу маржу-end-end: -300px on .forward . -300px является произвольным значением здесь, значение просто должно быть больше, чем ширина. Forward элемент + (-) 1em translatex . Однако в моем фактическом использовании я не могу установить такие произвольные значения, как это.

Подробнее здесь: https://stackoverflow.com/questions/794 ... llable-div