css 拉伸 resize —— 实现可拉伸的div（含限制拉伸的尺寸）

实现原理

添加resize 属性即可实现：

• none：初始值，表示没有拉伸效果，常用来重置<textarea>元素内置的拉伸行为，代码如下：
  

  textarea {
      resize: none;
  }

• both：既可以水平方向拉伸，也可以垂直方向拉伸。

• horizontal：仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。
• vertical：仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。
• block：后期新增的属性值，目前现代浏览器都提供支持。其表示沿着块级元素的排列方向拉伸，默认是垂直方向，也可能是水平方向，这取决于writing-mode的值。
• inline：和block属性值类似，只是inline表示内联元素的排列方向。默认是水平方向，如果使用writing-mode属性改成垂直排版，则inline的拉伸方向就会变成垂直方向。

resize 生效的条件

• 不支持内联元素。
• 如果是块级元素，需要overflow属性的计算值不是visible。

即div需要同时设置overflow属性才能拉伸，例如：

div {
    overflow: hidden;
    resize: both;
}

通过设置min-width、min-height、max-width和max-height可以限制拉伸尺寸。

完整代码范例

<template>
  <div style="padding: 30px">
    <div class="box"></div>
  </div>
</template>

<style scoped>
.box {
  overflow: hidden;
  resize: both;
  border: 1px solid red;
  width: 300px;
  height: 100px;
  min-width: 200px;
  max-width: 600px;
}
</style>