Cách thiết lập chiều rộng tối thiểu (min-width) của phần tử với JavaScript

Thuộc tính minWidth (CSS min-width) đặt giới hạn dưới cho chiều rộng phần tử. Phần tử không co nhỏ hơn giá trị này, dù container thu hẹp.

Ví dụ minh họa

Container宽 50%. Nhấn nút đặt min-width 500px – container sẽ không co nhỏ hơn 500px:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 50%;
      background-color: gray;
      padding: 20px;
    }
  </style>
</head>
<body>
  <p>Nhấn nút để đặt chiều rộng tối thiểu.</p>
  <button type="button" onclick="display()">Min Width</button>
  <div id="box">
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
  </div>
  <br>
  <script>
    function display() {
      document.getElementById("box").style.minWidth = "500px";
    }
  </script>
</body>
</html>

Mối quan hệ width / min-width / max-width

Quy tắc ưu tiên: min-width > width > max-width

/* Kết quả thực tế */
width: 50%;
min-width: 500px;
max-width: 800px;
/* → width tính toán = clamp(500px, 50%, 800px) */

Ứng dụng responsive

• Ngăn nội dung quá chật trên mobile.
• Sidebar cố định chiều rộng tối thiểu.
• Input/form field không quá nhỏ.