Cách thiết lập chiều cao tối đa (max-height) của phần tử với JavaScript

Thuộc tính maxHeight (CSS max-height) đặt giới hạn trên cho chiều cao phần tử. Phần tử không cao hơn giá trị này, nội dung tràn sẽ bị cắt hoặc cuộn tùy overflow.

Ví dụ minh họa

Hộp có overflow auto. Nhấn nút đặt max-height 70px – nội dung vượt sẽ cuộn:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 300px;
      background-color: gray;
      overflow: auto;
      padding: 10px;
    }
  </style>
</head>
<body>
  <p>Nhấn nút để đặt chiều cao tối đa.</p>
  <button type="button" onclick="display()">Max Height</button>
  <div id="box">
    <p>Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div.</p>
  </div>
  <br>
  <script>
    function display() {
      document.getElementById("box").style.maxHeight = "70px";
    }
  </script>
</body>
</html>

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

Quy tắc: min-height > height > max-height

height: 500px;
max-height: 300px;
/* → Chiều cao thực tế = 300px (max-height thắng) */

Ứng dụng phổ biến

• Dropdown menu: max-height: 300px; overflow: auto – giới hạn chiều cao, cuộn nếu nhiều item.
• Accordion/Collapse: animate max-height từ 0 → giá trị lớn để hiệu ứng mượt (transition không hoạt động trên height: auto).
• Modal: max-height: 90vh; overflow: auto – tránh tràn màn hình.