overflow

Свойство overflow позволяет буквально определить, что делать с содержимым блочного (то есть для элемента, у которого display определяется как block, inline-block, flex или grid) элемента, если оно не влезает в размеры — отобразить или обрезать (с полосами прокрутки или без).

Если содержимое блока будет больше, чем границы блока, оно будет «обрезано»:

        
          
          .article {  /* Задаём ограничения по размеру блока */  width: 300px;  height: 300px;  overflow: hidden;}
          .article {
  /* Задаём ограничения по размеру блока */
  width: 300px;
  height: 300px;
  overflow: hidden;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .selector {  overflow: hidden;}
          .selector {
  overflow: hidden;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно равнозначно применяется для обеих осей. Аналогичного результата можно добиться, используя самостоятельные CSS-свойства overflow-x и overflow-y.

• visible — содержимое отображается снаружи родительского блока, если его размеры больше размеров «родительского» блока (значение по умолчанию);
• hidden — содержимое, выходящее за пределы «родительского» блока, обрезается по его границам без прокрутки;
• clip — новое значение, похожее по результату на hidden, но границы родительского блока рассчитываются с учётом внутренних отступов;
• scroll — контент обрезается по границам «родительского» блока, но внутри этой области содержимое доступно с помощью прокрутки;
• auto — если содержимое переполняет блок, контент будет доступен для прокрутки.

💡 Чтобы контент внутри блока можно было скроллить, его содержимое должно явно превышать высоту родительского блока. Этого можно добиться или явно задав ему height, или ограничив высоту родительского блока.

💡 Задавая родительскому блоку фиксированную высоту, учитывайте, что, если не указан box-sizing: border-box, то это значение не учитывает внутренние отступы, заданные с помощью padding, что может спровоцировать появление нежелательной прокрутки.

На практике

Скопировать ссылку "На практике" Скопировано

Realetive советует

Скопировать ссылку "Realetive советует" Скопировано

🛠 При вёрстке «классических» макетов необходимости в управлении полосой прокрутки практически нет. Чтобы избежать появления нежелательных полос прокрутки, минимизируйте явное задание высоты (кроме случаев, где это действительно необходимо).

Ещё один пример, когда будет полезно знание свойства overflow — обрезание текста с многоточием (в сочетании со свойством text-overflow: ellipsis или недокументированного -webkit-line-clamp):

+ Развернуть