EN
CSS - create resizable element
0 points
In this article, we would like to show you how to create resizable elements using CSS.
Quick solution:
xxxxxxxxxx
1
.element {
2
resize: both;
3
overflow: auto;
4
}
or:
xxxxxxxxxx
1
.element {
2
resize: horizontal;
3
overflow: auto;
4
}
or:
xxxxxxxxxx
1
.element {
2
resize: vertical;
3
overflow: auto;
4
}
Warning: This solution was introduced to Microsoft Edge around 2020.
In this example, we set resize
property value to both
, so we can resize the element both vertically and horizontally.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
height: 150px;
8
}
9
10
.resizable {
11
height: 100px;
12
width: 100px;
13
border: 2px solid;
14
resize: both; /* <----- required */
15
overflow: auto; /* <----- required */
16
}
17
18
</style>
19
</head>
20
<body>
21
<div class="resizable"></div>
22
</body>
23
</html>
In this example, we set resize
property value to horizontal
, so we can resize the element horizontally.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
.resizable {
7
height: 100px;
8
width: 100px;
9
border: 2px solid;
10
resize: horizontal; /* <----- required */
11
overflow: auto; /* <----- required */
12
}
13
14
</style>
15
</head>
16
<body>
17
<div class="resizable"></div>
18
</body>
19
</html>
In this example, we set resize
property value to vertical
, so we can resize the element vertically.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
height: 200px;
8
}
9
10
.resizable {
11
height: 100px;
12
width: 100px;
13
border: 2px solid;
14
resize: vertical; /* <----- required */
15
overflow: auto; /* <----- required */
16
}
17
18
</style>
19
</head>
20
<body>
21
<div class="resizable"></div>
22
</body>
23
</html>