Haga que los elementos flexibles 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 parezca "en línea"?

Específicamente, ¿cómo puedo determinar el ancho del niño según su contenido y no expandirlo al ancho del padre?

Lo que probé:

Puse al niño a display: inline-flex, pero aún ocupaba 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

Úselo align-items: flex-starten el recipiente o align-self: flex-starten los artículos flexibles.

No hay necesidad de display: inline-flex.

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

La align-selfpropiedad hace lo mismo que align-items, excepto que se align-selfaplica a los elementos flexibles, mientras que se align-itemsaplica al contenedor flexible .

Por defecto, align-selfhereda el valor de align-items.

Como su contenedor es flex-direction: column, el eje transversal es horizontal y align-items: stretchestá expandiendo el ancho del elemento secundario tanto como puede.

Puede anular el valor predeterminado con align-items: flex-starten el contenedor (que es heredado por todos los elementos flexibles) o align-self: flex-starten el elemento (que está limitado al elemento único).

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

• ¿Cómo funciona flex-wrap con align-self, align-items y align-content?

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

• En CSS Flexbox, ¿por qué no hay propiedades "justify-items" y "justify-self"?

Además align-self, también puede considerar el margen automático, que hará casi lo mismo

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>