block-size: размер по блочной оси письма
Block-size задаёт размер по оси размещения блоков. Для обычного горизонтального текста он соответствует высоте, но в вертикальном письме ориентируется по другой физической оси.
Назначение
Block-size задаёт размер по оси размещения блоков. Для обычного горизонтального текста он соответствует высоте, но в вертикальном письме ориентируется по другой физической оси.
Как это работает
В учебном примере фиксированный размер нужен, чтобы увидеть прокрутку. Для текстовых секций рабочего сайта часто безопаснее min-block-size, позволяющий области увеличиваться вместе с содержимым.
Пример
<style>.block-demo{box-sizing:border-box;block-size:8rem;overflow:auto;border:1px solid #7c9d87;padding:1rem}.block-demo p{margin:0 0 1rem}</style>
<div class="block-demo" tabindex="0" role="region" aria-label="Прокручиваемая заметка"><p>Первый абзац учебного объяснения.</p><p>Второй абзац с дополнительными подробностями.</p><p>Третий абзац, который может потребовать прокрутки.</p></div>Что должно получиться
В горизонтальном режиме область ограничена по высоте. Когда текст не помещается, он доступен через прокрутку. Название области помогает отличить её от остальной страницы.
Граница применения и частая ошибка
Фиксированный размер легко создаёт неудобные вложенные прокрутки при увеличении текста. Overflow:hidden скрывает лишнее содержимое вместо решения проблемы. Используйте ограничение только там, где пользователь сможет получить доступ ко всему тексту.
Самостоятельная проверка
Увеличьте масштаб и проверьте прокрутку клавиатурой. Замените block-size на min-block-size и сравните поведение. Обоснуйте, какой вариант подходит обычной статье, а какой — специальной ограниченной панели.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.