Доброго времени суток, подскажите пожалуйста, как срабатывает данное свойство и в каких случаях его используют?
Доброго, с помощью этого свойства можно управлять поведением содержимого блочных элементов, в случае если их размер превышает допустимые длину и (или) ширину. Чем больше содержимое у блока тем больше становится сам блок, так вот если размеры блока не указанны то он растягивается и принимает всё в себя, а если же размеры явно задали то блок не увеличивается, а элементы выползают за границы блока, для таких ситуаций существует overflow которое говорит как отображать свойство в таких случаях.
Есть 4 варианта значения данного свойства:
visible – по умолчанию стоит это значение, всё видимо и то как содержимое выходит за блок тоже.
hidden – прячет всё что выходит за рамки блока.
auto – если блок переполнен то появляются полоски прокрутки.
scroll – просто добавляет полосы прокрутки.
.wrap {
display: flex;
flex-direction: row;
}
.block-1 {
width: 120px;
height: 100px;
margin: 10px;
background-color: gray;
overflow: visible;
}
.block-2 {
width: 120px;
height: 100px;
margin: 10px;
background-color: gray;
overflow: hidden;
}
.block-3 {
width: 120px;
height: 100px;
margin: 10px;
background-color: gray;
overflow: auto;
}
.block-4 {
width: 120px;
height: 100px;
margin: 10px;
background-color: gray;
overflow: scroll;
}
<div class="wrap">
<div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, explicabo.
<div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, praesentium.
<div class="block-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, nam, neque. Aliquid atque error nisi quidem quo ratione reiciendis sint.
<div class="block-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, possimus?
В этом примере все 4 варианта задания свойства overflow в том же порядке что и представлены выше, в первом случае мы видим что текст выходит за рамки, во втором случае всё что за рамками то обрезается, в третьем случае добавляется скролл тогда и где нужно, а в 4 случае у нас сразу изначально есть скролл вне зависимости от контента.