Hacer que los elementos flex tomen el ancho del contenido, no el ancho del contenedor principal

Tengo un contenedor <div> con display: flex. Tiene un hijo <a>.

¿Cómo puedo hacer que el niño aparezca "en línea"?

Específicamente, ¿cómo puedo determinar el ancho del hijo por su contenido, y no expandirlo al ancho del padre?

Lo que intenté:

Puse el niño en display: inline-flex, pero aún así tomó todo el ancho. También probé todas las demás propiedades de visualización, pero nada tuvo efecto.

Ejemplo: 

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}
<div class="container">
  <a href="#">Test</a>
</div>

Http://codepen.io/donpinkus/pen/YGRxRY

Author: Michael_B, 2016-10-19
Source

1 answers

Utilice align-items: flex-start en el envase, o align-self: flex-start en los elementos flexibles.

No hay necesidad de display: inline-flex.

Una configuración inicial de un contenedor flexible es align-items: stretch. Esto significa que los elementos flex se expandirán para cubrir toda la longitud del contenedor a lo largo del eje transversal.

La propiedad align-self hace lo mismo que align-items, excepto que align-self se aplica a elementos flex mientras que align-items se aplica al contenedor flex.

Por defecto, align-self hereda el valor de align-items.

Dado que su contenedor es flex-direction: column, el eje transversal es horizontal, y align-items: stretch está expandiendo el ancho del elemento hijo tanto como puede.

Puede reemplazar el valor predeterminado con align-items: flex-start en el contenedor (que es heredado por todos los elementos flex) o align-self: flex-start en el elemento (que se limita al único elemento).

Obtenga más información sobre la alineación flexible a lo largo del eje transversal aquí:

Obtenga más información sobre la alineación flexible a lo largo del eje principal aquí:

 111
Author: Michael_B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-30 11:10:22