Как правильно задать ширину блока?

Question

[Your Friend]

Салют. Есть кусочек кода -------> https://jsfiddle.net/8kdgg1ht/3/
Задача сделать блок, в котором размещается контент-горизонтально, + горизонтальный скролл если превышается ширина блока. На примере, контент помещается в блок .wrap-inner, для того что бы все заработало как надо - блоку нужно задавать фиксированную ширину, НО, если задать ширину родителя больше чем совокупная ширина контента помещенного в него- тогда при прокрутке до конца - остается свободное место, если задать-меньше -тогда контент просто не отображается...отсюда вопрос, как без помощи скриптов задать правильно ширину блока .wrap-inner, если количество блоков помещаемых в него заранее неизвестно?

P.S. или может у кого то на примете есть другие варианты решения?

Answer 1

[Ankhena]

Лучше так: https://codepen.io/anon/pen/mEqKox

большому блоку задать max-width и display:inline-block - тогда не будет пустого места, если маленьких блоков мало.

Answer 2

[Денис Васильев]

Может так?
https://jsfiddle.net/mrnobody/8kdgg1ht/5/

Comments

[Aslan]

в данном случае ему нужно использовать min-width

Answer 3

[Сергей]

Тогда уж вот так:
https://codepen.io/hlopka/pen/GqOGwx

Comments

[Денис Васильев]

Ну тогда можно без иннера — https://codepen.io/corvus-007/pen/rLYKRN?editors=1100

[Your Friend]

Объясните пжлст что это за фишка с font-size:0 и font-size:1 ? White-space: nowrap -понятно, что бы он не в колонку строился, а в ряд, а с размером шрифта не совсем понятно...

[Ankhena]

Сергей:, Денис Васильев:
так все равно остается пустое место в родительском блоке.
Your Friend: с размером шрифта: если блоки в коде написаны на разных строчках, то браузеры могут считать, что между ними есть пробел. Чтобы оградить себя от таких сюрпризов, ставим размер шрифта = 0.
1rem - восстанавливаем размер шрифта - единица rem задаёт размер относительно размера шрифта элемента html. Статей на эту тему полно, погуглите.

[Ankhena]

Кстати, мой ответ тоже не очень правильный. Посмотрите, во всех вариантах, что будет, если добавить текст в красные блоки - сюрприз.

[Your Friend]

да,да) уже смотрел) получается оптимальный вариант все таки - прибегнуть в скриптам

[Сергей]

Ankhena: Денис Васильев: Your Friend: https://codepen.io/hlopka/pen/GqOGwx вот ваше решение :)

[Ankhena]

Сергей: да, это прекрасно, только до меня пока не дошла механика, с чего это блоки собрались уехать, если они с текстом.