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

[Anonymous]

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

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

< /code>
css: < /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%;
}

Ожидаемое поведение: .forward div должен отображаться на правом краю .parent .
i ' VE сообщил об этой проблеме в Bugzilla, но ищу альтернативные решения или обходные пути, которые могут помочь решить эту проблему во время решения. Margin-Inline-end: -300px on .forward . -300px является произвольным значением здесь, значение просто должно быть больше, чем ширина. Forward элемент + (-) 1em translatex . Однако в моем фактическом использовании я не могу установить такие произвольные значения, как это.

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