В ширину flex-контейнер будет равняться 100 % доступного пространства, но его высота естественным образом определяется контентом. Это поведение не изменяется при повороте главной оси.
clearfix применяется к элементу, содержащему плавающие элементы. Распространенная ошибка — применение данного класса к неподходящему элементу, например непосредственно к плавающему элементу или контейнеру, стоящему после контейнера с плавающими элементами.
Рекомендую добавлять код из листинга 3.6 в CSS-код каждый раз, когда начинаете создавать сайт, — это застрахует вас от массы неприятностей в долгосрочной перспективе.
