Есть блок с overlow-x: scroll
с неизвестным количеством элементов. Возможно ли без помощи js
при переполнении #container
расположить видимые элементы как при justify-content: space-between
?
const $container = document.getElementById(`container`);
document.getElementById(`add`).addEventListener(`click`, () => $container.insertAdjacentHTML(`afterbegin`, `<div class='item'></div>`))
document.getElementById(`remove`).addEventListener(`click`, () => $container.lastChild.remove())
#container {
padding: .5rem;
background-color: gray;
overflow-y: hidden;
overflow-x: scroll;
display: flex;
flex-flow: row nowrap;
justify-content: center;
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: start;
min-width: 3rem;
height: 3rem;
}
.item+.item {
margin-left: .5rem;
}
.item:nth-child(odd) {
background-color: green
}
.item:nth-child(even) {
background-color: red
}
<div id='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<button id='add' type='button'>Добавить элемент</button>
<button id='remove' type='button'>Удалить элемент</button>