Почему блоки не принимают ширину?

Question

[Иван Шашков]

Почему у .modelA-kit такая странная ширина?

https://codepen.io/xaski2000/pen/yLgjmLa

Answer 1

[Вадим]

Потому что Вы ограничили родительский контейнер по ширине и не разрешили переносы на новую флек-строку. Элементы пытаются в нём уместиться как могут.
flex-shrink: 0 для modelA-kit решит вопрос.

Comments

[Иван Шашков]

Я не уточнил, что конкретно хочу сделать.
Идея следующая: задать родителю определенную ширину, сделать горизонтальный скролл этого блока, и внутри напихать дочерних блоков, нужно именно в скролле это все сообразить, хз как это сделать правильно.

[Вадим]

Иван Шашков, Так, Вы попробовали предложенное решение? Оно не подходит? Судя по всему, это решит Вашу проблему.

[Иван Шашков]

Вадим, нет конечно, я же дурачек.
Спасибо большое!

Answer 2

[Rsa97]

Для потомков flex-контейнера размер по главной оси рассчитывается автоматически. Можно только ограничить его через min-width/min-height.

Comments

[Иван Шашков]

Я не уточнил, что конкретно хочу сделать.
Идея следующая: задать родителю определенную ширину, сделать горизонтальный скролл этого блока, и внутри напихать дочерних блоков, нужно именно в скролле это все сообразить, хз как это сделать правильно.

Answer 3

[Фёдор]

У Вас родительский контейнер ограничен шириной в 500px. У дочерних элементов ширина 300px + маргины боковые по 15px. Сложите все эти данные и ответьте себе на вопрос. Можно ли всё это запихнуть в фиксированный родительский контейнер шириной в 500px?

upd: Как должен выглядеть блок?

Comments

[Иван Шашков]

Я не уточнил, что конкретно хочу сделать.
Идея следующая: задать родителю определенную ширину, сделать горизонтальный скролл этого блока, и внутри напихать дочерних блоков, нужно именно в скролле это все сообразить, хз как это сделать правильно.

[Фёдор]

Иван Шашков, Ну так Вам уже написали что надо указать, чтобы решить Вашу задачу.