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

[Anonymous]

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


< pre class="snippet-code-css lang-css Prettyprint-override">

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

* {
font-size: 30px;
}

.container {
display: flex;
flex-direction: column;
overflow-x: auto;
/* Enables horizontal scrolling when content overflows */
}

.item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
position: relative;
border: 3px solid plum;
}

.item p {
flex: 1;
margin: 0;
white-space: nowrap;
/* Prevents text from wrapping */
}

.item button {
position: sticky;
right: 0;
margin-left: 10px;
white-space: nowrap;
}

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

First item text is a bit longer and continues without wrapping.
First Button

Second item text is also extended to demonstrate horizontal scrolling.
Second Button

Подробнее здесь: https://stackoverflow.com/questions/792 ... -the-right