Зробіть, щоб гнучкі елементи приймали ширину вмісту, а не ширину батьківського контейнера

У мене є контейнер <div>з display: flex. У неї є дитина <a>.

Як я можу змусити дитину виглядати "встромленою"?

Зокрема, як я можу зробити ширину дитини залежно від її вмісту, а не розширити до ширини батьків?

Що я спробував:

Я налаштував дитину display: inline-flex, але вона все-таки зайняла всю ширину. Я також спробував усі інші властивості відображення, але нічого не мало ефекту.

Приклад:

.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

Використовуйте align-items: flex-startна контейнері або align-self: flex-startна гнучких предметах.

Не потрібно display: inline-flex.

Початкова настройка гнучких контейнерів є align-items: stretch. Це означає, що гнучкі елементи розширяться, щоб покрити всю довжину контейнера вздовж поперечної осі.

align-selfВластивість робить те ж саме, що align-items, за винятком того, що align-selfвідноситься до нежорстких деталей в той час як align-itemsвідноситься до гнучкого контейнеру .

За замовчуванням align-selfуспадковує значення align-items.

Оскільки ваш контейнер є flex-direction: column, поперечна вісь горизонтальна і align-items: stretchзбільшує ширину дочірнього елемента наскільки це можливо.

Ви можете змінити значення за замовчуванням align-items: flex-startна на контейнері (який успадковується всі гнучкі елементи) або align-self: flex-startна елементі (який обмежений одним елементом).

Докладніше про вирівнювання згину вздовж поперечної осі тут:

• Як функція flex-wrap працює з align-self, items-items та align-content?

Дізнайтеся більше про вирівнювання згину уздовж головної осі тут:

• Чому у CSS Flexbox чому немає властивостей "justify-items" та "justify-self"?

Крім того, align-selfви також можете розглянути автоматичний запас, який зробить майже те саме

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