如何让任何 CSS 元素可调整大小 🔧（无需 JavaScript）

Source: Dev.to

resize 属性

默认情况下，元素不可调整大小。
要让元素（例如 <textarea>）可调整大小，可以使用 CSS 的 resize 属性：

/* 让元素在两个方向上都可调整大小 */
resize: both;

/* 元素还必须拥有允许滚动的 overflow 值 */
overflow: auto; /* 或 overflow: scroll; */

第二行至关重要——如果不把 overflow 设置为可滚动的值（如 auto 或 scroll），resize 将不起作用。

resize 的三个取值

/* 允许水平和垂直方向都可调整大小 */
resize: both;

/* 只允许水平调整大小 */
resize: horizontal;

/* 只允许垂直调整大小 */
resize: vertical;

使用 resize: both; 时，用户可以抓住元素右下角并拖动来改变大小。唯一的限制是只能从角落进行调整，不能从侧边进行。这种行为在许多使用场景下已经足够。