CSS Flexbox без обертывания с заполнением ⇐ CSS

[Anonymous]

Ниже приведен CSS Flex Box внутри контейнера свитков. Однако контейнер для прокрутки имеет левую и правую прокладку с установленной Flex-WRAP, в котором нельзя неверно, права прокладки игнорируется. Это, по -видимому, потому, что Flex Box не расширяется, чтобы разместить предметы, которые продолжаются за пределами его границ. Это явно предполагаемое поведение. Является ли способ адаптировать и сохранить эффективное пространство накладки..scrollable {
position: relative;
overflow-x: scroll;
margin: 0 auto;
padding: 20px 40px;
max-width: 300px;
border: 1px solid #000;
}

.tiles {
align-items: flex-start;
display: flex;
flex-wrap: nowrap;
gap: 20px;
justify-content: flex-start;
}

.tiles > div {
background: green;
flex: 1 0 60px;
height: 30px;
line-height: 30px;
width: 60px;
text-align: center;
}< /code>


Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

< /code>
< /div>
< /div>
< /p>
Одним из способов будет вычислять ширину .tiles с JavaScript и добавить стиль. Другим было бы использовать: до и: после ширины желаемой прокладки, но это также будет включать в себя пробел.
Есть ли простой способ сделать это?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -preserved