Как расположить элементы с шириной в 100% на одной линии в фиксированном контейнере?

Question

[wbrapist]

Есть контейнер фиксированной ширины с overflow: scroll. В нём несколько блоков шириной в 100%. Как расположить эти блоки на одной линии?

Пробовал float: left и display: inline-block - не работает, т.к. элементы не умещаются на одной строке. Попробовал flex, с которым я пока что плохо знаком, первые два DIV'a не отображаются корректно. Как решить данную проблему?

Не правильно работающий пример на flex: https://jsfiddle.net/hnvxf0yc/

Comments

[Александр Шаповал]

но они же 100% ширины занимают, сделайте два блока по 50% и они займут 100% по половине каждый

[wbrapist]

Александр Шаповал: зачем? по 100% хочу.

А если будет 200 блоков, например?

[Александр Шаповал]

wbrapist: есть комната 6х4 метров, есть 200 столов 1х1 метра, как вы итоговых 200 метров запихнете в комнату 6х4?

[Александр Шаповал]

По вашему коду 1 стол будет занимать всю ширину комнаты

[wbrapist]

Александр Шаповал: мне не нужны все столы сразу. Я покажу вам одни, вынесу их из комнаты, занесу другие - и опять же покажу их, если надо.

overflow: scroll

[Александр Шаповал]

wbrapist: вы если занесете один стол, он займет 100%, если два то 200%, а комната не вместит в себя больше чем 100%

[wbrapist]

Александр Шаповал: Да, так и есть. Я думал вы поняли о чем я. Тогда так: Я покажу вам первый стол, если захотите увидеть второй, то первый я вынесу и второй занесу в комнату. Вы увидите второй стол. Так лучше?

[Александр Шаповал]

wbrapist: тогда выводите по одному элементу, при каком-то действии убирайте его и показывайте второй и так далее а не все сразу)

[wbrapist]

Александр Шаповал: мне казалось, что так будет проще в решении моей задачи. Но, в итоге нет. Я нуб, что сказать.

Answer 1

[iBird Rose]

убрать у .wrapper стиль justify-content: center; ?

Comments

[wbrapist]

Работает. Существуют в мире еще варианты для решения поставленной задачи?

Answer 2

[Роман Сохин]

Здравствуйте.
Подправил ваш пример на flexbox: https://jsfiddle.net/hnvxf0yc/1/
Дочерним дивам нужно задать flex-basis: 25%; - если их 4 и родителю убрать justify-content.

Comments

[wbrapist]

Без flex-basis работает так же. Почему?

[Роман Сохин]

wbrapist: Подправил еще ответ: https://jsfiddle.net/hnvxf0yc/2/
Прописываем .box
flex: 0 0 100%;
Что значит не расти, не сжиматься и занимать 100%
Так корректней.