Чтобы изменить размер элемента HTML в зависимости от его содержимого, вы можете использовать несколько методов. Вот некоторые из наиболее распространенных подходов:

1. CSS max-content:
   Вы можете использовать значение max-contentдля шириныили Свойство heightв CSS. При этом размер элемента будет соответствовать его содержимому, не превышая указанного максимального значения.

   <div >
    <!-- Content goes here -->
   </div>

2. JavaScript scrollWidthи scrollHeight:
   Вы можете использовать JavaScript для динамического изменения размера элемента в зависимости от его содержимого с помощью scrollWidthи scrollHeight. Эти свойства представляют ширину и высоту содержимого элемента, включая любое переполнение.

   <div id="myElement">
    <!-- Content goes here -->
   </div>
   <script>
    var element = document.getElementById("myElement");
    element.style.width = element.scrollWidth + "px";
    element.style.height = element.scrollHeight + "px";
   </script>

3. jQuery outerWidthи outerHeight:
   Если вы используете jQuery, вы можете добиться аналогичных результатов, используя outerWidthи методы outerHeight. Эти методы включают отступы и границы в рассчитанной ширине и высоте.

   <div id="myElement">
    <!-- Content goes here -->
   </div>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
    var element = $("#myElement");
    element.css({
      width: element.outerWidth(),
      height: element.outerHeight()
    });
   </script>

Эти методы позволяют динамически изменять размер элемента в зависимости от его содержимого. Не забудьте адаптировать код к вашему конкретному варианту использования и соответствующим образом настроить селектор или идентификатор.