FLEX'ы размещённые в flex-basis: 100%, вытесняют контент за пределы прокрутки. Как решить проблему?

Question

FLEX'ы размещённые в flex-basis: 100%, вытесняют контент за пределы прокрутки. Как решить проблему?

Владимир Мыслитель (5929), закрыт 5 лет назад

Ссылка на демонстрацию кода: codepen.io/Mr_SVN/pen/JjjzrQj

В общем проблема такова:

Если DIV's.a4 слишком много, то они вытесняют DIV's.a2 так, что их не отображает браузер. Даже при скроллинге.

Я многое уже перепробовал, чтобы решить проблему.

Кстати, если убрать DIV.a1, то всё заработает!
Вот только в этом случае, flex-basis: 100%; перестаёт работать.
Просто уберите DIV's.a4, у убедитесь сами.

Дополнен 5 лет назад

Кстати если height: 100%; сменить на min-height: 100%;

flex-basis: 100%; также перестаёт работать.

По идее, он должен растягиваться и занимать всё свободное пространство, при малом количестве блоков DIV's.a4
Однако это не происходит.

Дополнен 5 лет назад

Итоги любых попыток исправить, когда кажется что всё норм:

Меняешь количество блоков, и оказывается один из этих косяков:

Answer 1

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