Everything about css resize property

What is resize in css?

Suppose we have a div or box. Now suppose some more text comes there. In this case scroll bar will be generated and we have to use scroll bar to read the whole content. In this type of case, we use resize. If we use resize then we can resize the div or box height and width according to our need. When the work is done then we can set the previous size or height or width of the div or box.

It has four values:
resize:vertical;
If we use vertical then we can only resize the div or box vertically.
resize:horizontal;
If we use horizontal then we can only resize the div or box horizontally.
resize:both;
If we use both then we can resize the div or box both vertically and horizontally.
resize:none;
Its means you can't resize.

We can't normally use resize properties. We will need a helper property and that is overflow. Because we use resize when the data is overflowing.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .div1{
        background-color:green;
        height:130px;
        width:130px;
        resize:horizontal;
    }
    .div2{
        background-color:green;
        height:130px;
        width:130px;
        resize:vertical;
    }
    .div3{
        background-color:green;
        height:130px;
        width:130px;
        resize:both;
    }
</style>
</head>
<body>

<div class="div1"> This a very good website for learning coding. Every thing is totally free. Also many resources are provided here. If you want then you can use it.</div>

<div class="div2"> This a very good website for learning coding. Every thing is totally free. Also many resources are provided here. If you want then you can use it.</div>

<div class="div3"> This a very good website for learning coding. Every thing is totally free. Also many resources are provided here. If you want then you can use it.</div>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us