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:
.element {
resize: both;
overflow: auto;
}
or:
.element {
resize: horizontal;
overflow: auto;
}
or:
.element {
resize: vertical;
overflow: auto;
}
Warning: This solution was introduced to Microsoft Edge around 2020.
Practical examples
1. Resizable element in both directions
In this example, we set resize property value to both, so we can resize the element both vertically and horizontally.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
height: 150px;
}
.resizable {
height: 100px;
width: 100px;
border: 2px solid;
resize: both; /* <----- required */
overflow: auto; /* <----- required */
}
</style>
</head>
<body>
<div class="resizable"></div>
</body>
</html>
2. Horizontal only
In this example, we set resize property value to horizontal, so we can resize the element horizontally.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.resizable {
height: 100px;
width: 100px;
border: 2px solid;
resize: horizontal; /* <----- required */
overflow: auto; /* <----- required */
}
</style>
</head>
<body>
<div class="resizable"></div>
</body>
</html>
3. Vertical only
In this example, we set resize property value to vertical, so we can resize the element vertically.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
height: 200px;
}
.resizable {
height: 100px;
width: 100px;
border: 2px solid;
resize: vertical; /* <----- required */
overflow: auto; /* <----- required */
}
</style>
</head>
<body>
<div class="resizable"></div>
</body>
</html>