Flex div (не растягивать на всю ширину) [дубликат]

Question

У меня есть 2 div и я использую flex:

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: red;
}

.item {
  height: 40px;
  margin-bottom: 10px;
}

<div class="parent">
  <div class="item">something here</div>
</div>

Моя проблема в том, что родительский элемент составляет 100% ширины экрана.

Как я могу сделать так, чтобы он оставался таким же большим, как содержимое элемента, чтобы он увеличивался автоматически (когда текста больше, то увеличивается или уменьшается с меньшим)?

Answer 1

Используйте inline-flex вместо flex:

display: inline-flex;