Flex div (no estirar todo el ancho) [duplicar]

Dec 07 2020

Tengo 2 divs y uso 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>

Mi problema es que el padre tiene el 100% del ancho de la pantalla.

¿Cómo puedo hacer que permanezca tan grande como el contenido del elemento, para que crezca automáticamente (cuando hay más texto, crece o se reduce con menos)?

Respuestas

1 fahimchowdhury Dec 07 2020 at 18:06

Utilice inline-flex en lugar de flex:

display: inline-flex;