"Выскакивание" в CSS

[kotenok gav]

С flex.

[ipgmvq]

Я предполагаю, что, когда у внешнего div flex с фиксированным размером (в данном случае 300px) не помещаются все внутренние div с фиксированными размерами (в данном случае по 100px + margin), он начинает игнорировать их свойство width, и получается вся эта петрушка. Просто нужно исбежать такой ситуации.

[kotenok gav]

Хорошо, а как тогда вы предлагаете реализовать это?

[ipgmvq]

я не совсем понимаю, что "это".
Вы хотите разместить горизонтально шесть элементов по 100px в ширину каждый на расстоянии 10px между ними, внутри общего внутреннего для веб-станицы элемента шириной 300px, да так, чтобы невидимые (т.к. они все не помещаются) внутри этого внешнего элемента внутренние элементы можно было прокрутить горизонтальной прокруткой?

[kotenok gav]

Да.

[ipgmvq]

У меня никогда не было именно такой задачи обязательно сделать горизонтальную прокрутку. Мне в голову приходит либо iframe маленькой ширины с подгрузкой внутрь более широкой html-страницы или делать прокрутку через javascript. Готовыми библиотеками js я не пользовался: может быть, там есть готовые js-решения для этого.

[kotenok gav]

Проблема решилась (благодаря помощи одного человека не отсюда) удалением justify-content: center;.

[chislo_avogadro]

Ещё решение -

div {
  display: inline-table;
  ....

Это вместо display: inline-block;

[kotenok gav]

Хм, возникла еще одна проблема: ширина элементов не такая, которую я ставил.

[Mental]

kotenok gav в сообщении #1485687 писал(а):

Хм, возникла еще одна проблема: ширина элементов не такая, которую я ставил.

Так это же элементарно. Манипулировать шириной надо так же через свойства Flexbox.

[kotenok gav]

Mental в сообщении #1485688 писал(а):

Манипулировать шириной надо так же через свойства Flexbox.

Хорошо, тогда еще почитаю о нем. Спасибо!

[kotenok gav]

Ну я не нашел там никаких подходящих свойств, кроме как flex-basis (когда я заменил width на него, ничего не изменилось).

[Mental]

kotenok gav в сообщении #1485721 писал(а):

Ну я не нашел там никаких подходящих свойств, кроме как flex-basis (когда я заменил width на него, ничего не изменилось).

Попробуйте здесь почитать:
https://tproger.ru/translations/how-css-flexbox-works/

[kotenok gav]

Помогло flex-shrink: 0;, спасибо!

[Mental]

kotenok gav в сообщении #1485797 писал(а):

Помогло flex-shrink: 0;, спасибо!

Ну, и всё. Вам теперь осталось добраться только до Bulma.