clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Overflow Y

Imperial Advance Hero Image

CSS Overflow Y

It is used when content overflow vertically from an element box.

 

Syntax - 

overflow-y: value ;

 

values

visible

This is default value which always visible the content if content overflow vertically the element box.

hidden

It hide all the y-axis content which is outside the element box.
scroll
It scroll all the content vertically which out side the element box
auto If content is going out side the box then then it automatically scroll the vertical content otherwise no scrolling there.
normal It is normal text.

 

For example -

<!DOCTYPE html>
<html>

<head>
    <title>CSS Overflow Vertically</title>
    <link rel="stylesheet" type="text/css" href="E:/style.css">

    <style>
        body{
            display: flex;
            justify-content: space-between;
        }
        .visible {
            background-color: lightblue;
            height: 40px;
            width: 200px;
            overflow-y: visible;
        }
        .hidden {
            background-color: lightblue;
            height: 40px;
            width: 200px;
            overflow-y: hidden;
        }
        .scroll {
            background-color: lightblue;
            height: 40px;
            width: 200px;
            overflow-y: scroll;
        }
        .auto {
            background-color: lightblue;
            height: 40px;
            width: 200px;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <p class="visible">Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. </p><br>
    <p class="hidden"> Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. </p><br>
    <p class="scroll">Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. </p><br>
    <p class="auto"> Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. </p>
</body>

</html>

 

Output

OverFlow

CSS