Often, when creating web pages, you may encounter a situation where the content of a block takes up much more space than itself is determined by the width and height of the block. In this situation, by default, the browser still renders the content, even if it goes beyond the block boundaries.
However, the overflow property allows you to customize the behavior of the block in such a situation and add the ability to scroll. This property can take the following values:
- auto: if the content goes beyond the block boundaries, then a scroll is created. In other cases, scrollbars are not displayed
- hidden: Only the visible part of the content is displayed. Content that goes beyond block boundaries is not displayed and scrollbars are not created
- scroll: the block displays scrollbars even if the content fits within the block boundaries, and no such scrollbars are required
- visible: default value, content is shown even if it goes outside the block boundaries
Consider the use of two values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling in CSS3</title>
</head>
<body>
<div class="article1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, leo vel tempor consequat, tellus
orci dictum nunc, quis consectetur felis leo id nisi. Nulla pulvinar vitae sapien nec malesuada. Mauris sed
nisi imperdiet mauris convallis scelerisque </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, leo vel tempor consequat, tellus
orci dictum nunc, quis consectetur felis leo id nisi. Nulla pulvinar vitae sapien nec malesuada. Mauris sed
nisi imperdiet mauris convallis scelerisque </p>
</div>
<div class="article2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, leo vel tempor consequat, tellus
orci dictum nunc, quis consectetur felis leo id nisi. Nulla pulvinar vitae sapien nec malesuada. Mauris sed
nisi imperdiet mauris convallis scelerisque </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, leo vel tempor consequat, tellus
orci dictum nunc, quis consectetur felis leo id nisi. Nulla pulvinar vitae sapien nec malesuada. Mauris sed
nisi imperdiet mauris convallis scelerisque </p>
</div>
</body>
</html>
The property overflow controls scrollbars both vertically and horizontally. Using the additional properties overflow-x and overflow-y , you can define scrolling horizontally and vertically, respectively. These properties take the same values as overflow:
overflow-x: auto; overflow-y: hidden;