Почему элементы расширяют границу главного контейнера?

Question

[Алексей Коновалов]

Всем привет! У меня есть сайт центральная часть которого состоит из сайдбара и части с контентом, которая строго указана 70% от ширины.
Внутри контента например блок с постом. А внутри поста хочу сдлать скролящийся блок с квадратиками. Но когда их много, они отодвигают границу главного контейнера в итоге тот уже не 70%, а 70% + N блоков.
При этом самому блоку с квадратами задаю максимальную ширину 100%. Но он не слушается. Подскажите что я не так делаю плз.
Сделал пример по этой ссылке: https://jsfiddle.net/alk90/xaeqfozp/12/

А вот что я хочу сделать:

Comments

[Максим]

https://jsfiddle.net/vtzq6y4k/ так наверно надо ?

[Алексей Коновалов]

Максим Ленский, не совсем, надо вот так:

[Максим]

Алексей Коновалов, https://codepen.io/topicstarter/pen/PopmPEw - с vw работает с процентами нет - почему то

Answer 1

[Родион Мещеряков]

Можно дополнить .content свойством width: calc(100% - 140px);, т.е. 100% от родителя - ширина сайдбара.

Другой вариант - добавить в тот же класс свойство min-width: 0;

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

Comments

[Алексей Коновалов]

Спасибо min-width: 0; помогло, другой вариант не подходит, т.к. не всегда есть сайдбар на странице.
Не подскажете почему так получилось, что min-width: 0; помогло?

[Родион Мещеряков]

Тут, например, во втором пункте рассказывается про подобный случай.