Как сделать ширину элемента автоматически соответствующей размеру его содержимого при переносе строк?

Коротко: элементу нужно дать не блочный 100%-ширины, а «подстраивающееся» поведение: display:inline-block / inline-flex / table или CSS‑свойство width: fit-content. Ниже — варианты и примеры.

1) Самый простой — inline-block (будет ширина равна ширине содержимого, при необходимости строки будут переноситься):
HTML:
<div class="box">Очень длинный текст, который может переноситься на несколько строк…</div>

CSS:
.box {
  display: inline-block;   /* важно — не block */
  white-space: normal;     /* разрешить перенос строк */
  padding: 6px;
  border: 1px solid #ccc;
  max-width: 300px;        /* опционально: ограничить, чтобы обязательно переносился */
}

2) width: fit-content (современные браузеры):
.box {
  width: fit-content;
  white-space: normal;
  max-width: 100%;         /* ограждает от выхода за пределы контейнера */
}

(При старых браузерах можно добавить префиксы: width: -moz-fit-content / -webkit-fit-content.)

3) display: table — поведение похоже на «подгонку под содержимое», тоже работает с переносами:
.box { display: table; white-space: normal; }

4) Если элемент — дочерний в flex-контейнере, flex может заставлять его растягиваться. В этом случае используйте:
.flex-item { flex: 0 0 auto; align-self: flex-start; width: auto; }

Дополнительно:
- Для переноса длинных слов используйте overflow-wrap: break-word; или word-break: break-word; / break-all по необходимости.
- inline-block создаёт пробелы между элементами в разметке — учитывайте это (или используйте font-size:0 на контейнере, комментарии между inline-block и т. п.).

Если хотите, пришлите ваш конкретный HTML/CSS — помогу подобрать точное решение.

Проблема в том, что `fit-content` для обычного блочного элемента иногда сходит с ума при переносах строк и берет доступную ширину родителя (fill-available) <br/> <br/> Чтобы браузер нормально схлопывал ширину по самой длинной строке внутри, нужно поменять тип самого элемента на строчно-блочный или табличный <br/> <br/> Убираешь `width: fit-content` и добавляешь `display: inline-block` <br/> <br/> <pre><code class="javascript">.child {
  background: green;
  font-size: 30px;
  border-radius: 14px;
  display: inline-block;
}</code></pre> <br/> <br/> Если `inline-block` по каким-то причинам не подойдет (например, нужны отступы между элементами, если их несколько), используй `display: table`, он тоже схлопывается по контенту, но ведет себя как блок <br/> <br/> <pre><code class="javascript">.child {
  background: green;
  font-size: 30px;
  border-radius: 14px;
  display: table;
}</code></pre> <br/> <br/> В обоих случаях зеленый фон займет ровно ширину самого длинного слова/строки, а не растянется на все 200px парента