Faça com que os itens flexíveis tenham largura de conteúdo, não largura do contêiner pai

Eu tenho um recipiente <div>com display: flex. Ele tem um filho <a>.

Como posso fazer a criança parecer "inline"?

Especificamente, como posso fazer com que a largura da criança seja determinada pelo seu conteúdo e não expandir para a largura do pai?

O que eu tentei:

Eu coloquei a criança display: inline-flex, mas ela ainda ocupava toda a largura. Eu também tentei todas as outras propriedades de exibição, mas nada teve efeito.

Exemplo:

.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

Use align-items: flex-startno contêiner ou align-self: flex-startnos itens flexíveis.

Não há necessidade display: inline-flex.

Uma configuração inicial de um contêiner flexível é align-items: stretch. Isso significa que os itens flexíveis serão expandidos para cobrir todo o comprimento do contêiner ao longo do eixo transversal.

A align-selfpropriedade faz a mesma coisa que align-items, exceto que align-selfse aplica aos itens flexíveis e align-itemsao contêiner flex .

Por padrão, align-selfherda o valor de align-items.

Como o contêiner é flex-direction: column, o eixo transversal é horizontal e align-items: stretchestá expandindo a largura do elemento filho o máximo possível.

Você pode substituir o padrão por align-items: flex-startno contêiner (que é herdado por todos os itens flexíveis) ou align-self: flex-startno item (que é confinado ao único item).

Saiba mais sobre o alinhamento flexível ao longo do eixo transversal aqui:

• Como o flex-wrap funciona com alinhar-se, alinhar itens e alinhar conteúdo?

Saiba mais sobre o alinhamento flexível ao longo do eixo principal aqui:

• No CSS Flexbox, por que não existem propriedades "justify-items" e "justify-self"?

Além disso, align-selfvocê também pode considerar a margem automática, que fará quase a mesma coisa

.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>