Thuộc tính CSS3 Resize

Giới thiệu

Thuộc tính resize cho phép người dùng thay đổi kích thước phần tử bằng cách kéo chuột ở góc dưới phải (giống <textarea> mặc định). Áp dụng cho bất kỳ element nào có overflow != visible.

Giá trị

Ví dụ: Resize both

<!DOCTYPE html>
<html>
<head>
  <style>
    .resizable {
      border: 2px solid #3498db;
      padding: 20px;
      width: 300px;
      min-width: 150px;
      max-width: 600px;
      min-height: 100px;
      max-height: 400px;
      resize: both;
      overflow: auto;        /* BẮT BUỘC: resize chỉ hoạt động khi overflow != visible */
      background: #f8f9fa;
    }
  </style>
</head>
<body>
  <div class="resizable">
    Kéo góc dưới phải để thay đổi kích thước. 
    Min/max width/height giới hạn phạm vi resize.
  </div>
</body>
</html>

Yêu cầu bắt buộc

.resizable {
  resize: both;
  overflow: auto;  /* hoặc hidden, scroll, clip — KHÔNG phải visible */
  /* Hoặc ít nhất một chiều: overflow-x: auto / overflow-y: auto */
}

Ứng dụng thực tế

• Code editor / textarea custom: Thay thế textarea mặc định
• Dashboard widget: User tự điều chỉnh kích thước panel
• Modal/dialog: Cho phép resize modal lớn
• Image cropper/preview: Kéo thả điều chỉnh vùng chọn
• Split pane: Kết hợp JS để resize đồng bộ 2 panel

Kết hợp với JavaScript (lưu kích thước)

<div id="panel" class="resizable">Content</div>

<script>
  const panel = document.getElementById('panel');
  
  // Khôi phục size từ localStorage
  const saved = JSON.parse(localStorage.getItem('panel-size') || '{}');
  if (saved.width) panel.style.width = saved.width;
  if (saved.height) panel.style.height = saved.height;
  
  // Lưu khi resize xong (dùng ResizeObserver)
  new ResizeObserver(entries => {
    const { width, height } = entries[0].contentRect;
    localStorage.setItem('panel-size', JSON.stringify({ width: `${width}px`, height: `${height}px` }));
  }).observe(panel);
</script>

Lưu ý

• Chỉ hoạt động trên block-level element (hoặc display: inline-block/flex/grid)
• Handle (góc kéo) chỉ xuất hiện ở góc dưới phải (LTR) / dưới trái (RTL)
• Không thể style handle trực tiếp bằng CSS (pseudo-element ::resize-handle chưa chuẩn)
• Mobile/touch: hỗ trợ tùy trình duyệt (Chrome Android hỗ trợ, Safari iOS hạn chế)