Flex div (não esticar a largura total) [duplicar]

Question

Tenho 2 divs e usando 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>

Meu problema é que o pai tem 100% da largura da tela.

Como posso fazer com que fique tão grande quanto o conteúdo do item, para que aumente automaticamente (quando há mais texto, aumenta ou diminui com menos)?

Answer 1

Use inline-flex em vez de flex:

display: inline-flex;