Длинная хлебная крошка должна быть выровнена по правому краю при прокрутке. ⇐ CSS

[Anonymous]

Я хочу создать в HTML навигационную цепочку, которая будет выравниваться по правому краю, если требуется прокрутка настолько длинная. Мне нужно решение, не использующее JavaScript. Мой первый подход заключался в использовании анимации, управляемой прокруткой, но это ненадежно. Есть у кого-нибудь идеи?

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

.container {
font-family: arial;
border: 2px solid;
padding: 20px;
height: 300px;
width: 320px;
max-width: 500px;
resize: horizontal;
overflow: auto;
}
.breadcrumb-list {
display: flex;
list-style-type: none;
gap: 1em;
padding: .5em;
margin: 0;
overflow-x: auto;
animation: detect-scroll forwards;
animation-timeline: scroll(x self);

li {
white-space: nowrap;
}

li:not(:last-child):after {
content:' |';
margin-left: .5em;
}
}

@keyframes detect-scroll {
from,to {
background-color: #ededed; /* it works with this */
justify-content: flex-end; /* but not with this */
}
}

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

Normal: left aligned
[list]
[*][url=#]Home[/url]
[*]My Account
[/list]
If scrolling is necessary, breadcrumb should be right aligned, so article-name is in viewport
[list]
[*][url=#]Home[/url]
[*][url=#]Men[/url]
[*][url=#]Clothes[/url]
[*][url=#]Sweatshirts[/url]
[*]Adidas Hoodie XL
[/list]

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-scrolled