Создайте

Чтобы размер элемента

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

  1. Поведение по умолчанию: по умолчанию элемент

    расширяется, чтобы вместить его содержимое. Для такого поведения вам не нужно применять какие-либо дополнительные свойства CSS.

  2. Display: inline-block: установка для свойства CSS displayзначения inline-blockв

    сделает это обернуть своих детей в термоусадочную пленку. Это позволяет элементу div занимать только необходимую ширину и высоту.

<div >
  <!-- Children elements -->
</div>
  1. Float: применение свойства floatк дочерним элементам может заставить родительский элемент
    обтекать их. Это полезно, если вы хотите создать столбцы или выровнять элементы по горизонтали.
<style>
  .child {
    float: left;
  }
</style>
<div>
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>
  1. Flexbox: использование макета CSS flexbox — еще один эффективный метод создания обертки
    вокруг дочерних элементов. Если установить для родительского контейнера значение display: flex, он автоматически изменит свой размер для размещения дочерних элементов.
<style>
  .parent {
    display: flex;
  }
</style>
<div class="parent">
  <!-- Children elements -->
</div>
  1. Сетка: аналогичным образом можно использовать сетку CSS для достижения желаемого эффекта. Если установить для родительского контейнера значение display:grid, его размеры будут скорректированы в соответствии с дочерними элементами.
<style>
  .parent {
    display: grid;
  }
</style>
<div class="parent">
  <!-- Children elements -->
</div>
  1. Переполнение: авто: если дочерние элементы превышают размер родительского
    , вы можете использовать свойство overflow, чтобы добавить полосы прокрутки или скрыть переполнение. Если задать overflow: auto, полосы прокрутки будут добавляться при необходимости.
<div >
  <!-- Children elements -->
</div>
  1. JavaScript/jQuery: если вам нужен более детальный контроль, вы можете использовать JavaScript или такую ​​библиотеку, как jQuery, для расчета и установки размеров родительского
    на основе размеров его детей динамически.

Размер для размещения дочерних элементов”