Сделать элементы гибкости занимать ширину содержимого, а не ширину родительского контейнера

У меня есть контейнер <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>

Ответы

Ответ 1

Используйте align-items: flex-start в контейнере или align-self: flex-start для элементов flex.

Нет необходимости в display: inline-flex.

Первоначальная настройка контейнера flex - align-items: stretch. Это означает, что элементы гибки будут расширяться, чтобы покрыть всю длину контейнера вдоль поперечной оси.

Свойство align-self делает то же самое, что и align-items, за исключением того, что align-self применяется к элементам flex, а align-items применяется к контейнеру flex.

По умолчанию align-self наследует значение align-items.

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

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

Подробнее о выравнивании гибкости вдоль поперечной оси:

Подробнее о выравнивании флюида вдоль главной оси: