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