Горизонтальная прокрутка (white-space)

[Velidan]

Доброго дня уважаемое сообщество. Столкнулся с неприятным нюансом и очень нужна помощь.

 

https://jsfiddle.net/96o200ds/2/

 

Для горизонтальной прокрутки у меня блок .overview имеет white-space: nowrap; (Потому что если не поставить так, тогда горизонтальная прокрутка не появится, а контент будет идти себе по высоте вниз).

 

Выставить четкую ширину (например: 2000px ) я не могу, так как ширина контента динамическая. 

 

 

Проблема в том, что контент не хочет выстраиваться на всю высоту и идти себе по ширине дальше, за границы видимого блока, а выстраивается в одну строчку.

 

Можно ли сделать так, чтобы контент заполнял всю высоту и дальше выстраивался себе в ширину?

 

П.С. Можно, конечно, на js при загрузке страницы вычислить ширину контента и назначить такую, но хотелось бы на css все сделать.

 

Буду благодарен за любую помощь.

Edited August 12, 2015 by Velidan

[Great Rash]

Контент всё правильно делает. Вы ему сказали: "выстройся в одну строчку", он и выстроился. Что вы попросили, то он и сделал.

[Velidan]

Хорошо, я это понимаю. Спасибо. Только я спрашивал, а как можно сделать так, чтобы контент заполнял всю допустимую высоту и при этом тянулся в ширину без её явного указания  в явных величинах?

[Алёна Стрелкова]

Хорошо, я это понимаю. Спасибо. Только я спрашивал, а как можно сделать так, чтобы контент заполнял всю допустимую высоту и при этом тянулся в ширину без её явного указания  в явных величинах?

А попробуйте для .scrollBox задать свойства justify-content, align-items, align-content, у него же указазан display:flex;

Не знаю только, поможет ли это, сама начала использовать flex недавно, но надеюсь, что хоть немного помогла

[Great Rash]

заполнял всю допустимую высоту и при этом тянулся в ширину

Это как?

[sigma77]

Это как?

Сейчас дошло. Вероятно ТС хочет, чтобы, допустим, по высоте влезает 4 полные строки, соответственно текст разбивается на эти 4 строки +/- равные по ширине строки. Т.о. получаем горизонтальный скролл.

 

ИМХО без js не сделаешь, если только <br> вручную использовать 

[Velidan]

Да, именно это я и хотел сделать. 

Очень жаль, хотелось средствами css это провернуть. Ведь если все по y - тогда по полной ширине текст прекрасно заполняется и тянется в высоту сколько ему нужно.

 

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

 

 

Алёна Стрелкова  Спасибо за помощь, но это не совсем то что мне нужно, указанные вами свойства влияют на позиционирование дочерних элементов/контента внутри flex-контейнера. Но не влияют на заполненность текста при горизонтальном скроле без явно заданной ширины.

Edited August 12, 2015 by Velidan

[Алёна Стрелкова]

Алёна Стрелкова  Спасибо за помощь, но это не совсем то что мне нужно, указанные вами свойства влияют на позиционирование контента внутри flex-контейнера. Но не влияют на заполненность текста при горизонтальном скроле без явно заданной высоты.

 

Да, я просто не правильно поняла вопрос и потому в очередной раз не смогла помочь