Закрепление позиции не работает для горизонтальной прокрутки при увеличении ширины элемента ⇐ CSS

[Anonymous]

Я пытаюсь предотвратить прокрутку элемента за пределы левого: 0, используя позицию: липкий. В некоторых случаях это работает нормально, но я заметил, что если ширина элемента увеличивается, он перестает работать. Например, работает следующее:

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

#header {
position: sticky;
left: 0;
width: 50%;
background-color: #888;
}
#page {
height: 80vh;
width: 120vw;
background-color: #000;
}

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

Where is my mind?

Но если я увеличу ширину элемента заголовка до 100 % он перестает работать.

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

#header {
position: sticky;
left: 0;
width: 100%;
background-color: #888;
}
#page {
height: 80vh;
width: 120vw;
background-color: #000;
}

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

Where is my mind?

Почему это происходит? И есть ли способ использовать позицию: липкий, чтобы предотвратить прокрутку элемента заголовка, когда его ширина равна 100%? В этом случае я предпочитаю не использовать позицию: исправлено.

Подробнее здесь: https://stackoverflow.com/questions/574 ... h-increase