Page 254 - Сила CSS3 Освой новейший стандарт

254 • Глава 7. Вспоминаем навыки верстки

Добавление этого правила кардинально меняет оформление страницы; div-блоки
content-main и content-secondary теперь находятся рядом друг с другом. Однако об
этом не так просто догадаться: оба блока стали настолько широкими, что content-
secondary даже не помещается в область просмотра. Зато внизу окна браузера по-
является полоса прокрутки огромной длины (рис. 7.2).

Рис. 7.2. Два блока div с главным содержимым страницы теперь выводятся бок о бок,
но вылезают далеко за пределы правого края области просмотра

Так происходит потому, что ширина гибких полей увеличивается в соответствии
с размером их содержимого; это называется внутренней установкой размера (intrinsic
sizing) — то же самое происходит с плавающими блоками, если для них не указана
ширина. Ширину блока div определяет самое длинное предложение или самое
широкое изображение внутри него. Во многих случаях именно такое поведение и
требуется, однако для нашей страницы оно абсолютно не подходит. Для того чтобы
справиться с недоразумением, нужно либо определить ширину обоих блоков div,
применив свойство width или max-width, либо сделать один или оба div-блока
гибкими с помощью свойства box-flex.

Создание гиБких полей
Свойство box-flex в действительности не запрещает внутреннее определение раз-
мера дочерних блоков div, однако оно включает перенос содержимого на новую

www.trk.kg