Open In App

How to specify a division element should be resizable in CSS ?

Last Updated : 17 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to specify that a division element should be resizable by the user using CSS.

Approach: The resize property is used to define if an element is resizable by the user. It can be specified with three values to denote that an element is resizable, that is, horizontal, vertical, and both. It is set to none by default. We can specify any of these values to make the division resizable as per the requirement. Additionally, the overflow property has to be set to auto so that the resize behaves correctly.

Syntax:

.resizable {

  /* Enable resize on both 
  horizontal and vertical */
  resize: both;
}

Example: In this example, we are using the above-explained method.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
            font-size: 20px;
        }
 
        .container {
            display: flex;
            height: 500px;
        }
 
        .resize-both,
        .resize-hor,
        .resize-ver {
            border: 5px green double;
            padding: 20px;
            width: 200px;
            height: 200px;
            margin: 16px;
 
            /* Set overflow to auto */
            overflow: auto;
        }
 
        .resize-both {
 
            /* Enable resize on both
            horizontal and vertical */
            resize: both;
        }
 
        .resize-hor {
 
            /* Enable resize on
            horizontal */
            resize: horizontal;
        }
 
        .resize-ver {
 
            /* Enable resize on
            vertical */
            resize: vertical;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
 
    <div class="container">
        <div class="resize-both">
            This division can be resized
            in both directions
        </div>
         
        <div class="resize-hor">
            This division can be
            resized horizontally
        </div>
         
        <div class="resize-ver">
            This division can be
            resized vertically
        </div>
    </div>
</body>
</html>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads