Как адаптировать ширину flex-элемента к содержимому?

Вы можете использовать свойство display: inline-flex, чтобы расположить элементы внутри контейнера в строку с возможностью оборачивания. Вот пример кода:

#container {
  display: inline-flex; /* Устанавливаем inline-flex для контейнера */
  flex-direction: row; /* Задаем направление расположения элементов в строку */
  flex-wrap: wrap; /* Позволяем элементам оборачиваться на новую строку при нехватке места */
  max-width: 200px; /* Ограничиваем максимальную ширину контейнера */
  padding: 10px; /* Добавляем внутренние отступы */
  margin: 20px; /* Устанавливаем внешние отступы */
  background-color: blue; /* Задаем фоновый цвет контейнера */
}

#container .item {
  width: 80px; /* Устанавливаем ширину элемента */
  height: 50px; /* Устанавливаем высоту элемента */
  background-color: red; /* Задаем фоновый цвет элементов */
  margin: 10px; /* Добавляем внешние отступы между элементами */
}

HTML-структура будет выглядеть следующим образом:

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

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

Я думаю, что эти два свойства как раз то, что вам нужно:

display: inline-flex;
width: min-content;

Использование display: inline-flex; позволяет вам создать элемент с флекс-контейнером, который будет вести себя как встроенный. А свойство width: min-content; задает ширину элемента минимально возможной по содержимому, что может помочь вам достичь нужного визуального эффекта.