大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来一个有趣的小技巧，即让任何 DOM 元素能随意变换大小。

如何让元素随意调整大小

开发者如果要让任意 DOM 元素可调整大小，可以添加以下 CSS 代码:

div {
  resize: auto;
  overflow: auto;
}

resize 属性允许指定元素是否可由用户调整大小，而 overflow 属性则确保元素内的内容在超出元素大小时可以滚动。

当然，开发者还可以使用 horizontal、vertical 等值来限制在特定方向上调整大小，例如：如果希望仅允许水平调整大小，则可以使用：

div {
  resize: horizontal;
  // resize: both; 两个方向都能调整
  // resize: none; 两个方向都不允许调整
  overflow: auto;
}

这个小技巧在各种场景下都很有用，尤其是在构建用户界面时，需要用户能够动态调整某些元素的大小。

同时，如果想在开发过程中验证某些元素的大小调整行为，而又不想过多地修改宽度和高度属性时，这个技巧也很有用。

当然值得一提的是，resize 不适用于以下元素：

• 内联元素
• 溢出属性设置为 visible 或 clip 的块元素

对任意元素使用 resize 属性

开发者可以使用 resize 属性使任何元素可调整大小。在以下示例中，可调整大小的 <div> 包含一个可调整大小的段落<p> 元素。

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>

下面是 CSS 的样式：

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}
div {
  height: 300px;
  width: 300px;
}
p {
  height: 200px;
  width: 200px;
}

参考资料

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

https://www.amitmerchant.com/resize-any-dom-element-using-two-lines-css/