Make flex items take content width, not width of parent container

by

I have a container <div> with display: flex. It has a child <a>.

How can I make the child appear “inline”?

Specifically, how can I make the child’s width determined by its content, and not expand to the width of the parent?

What I tried:

I set the child to display: inline-flex, but it still took up the full width. I also tried all other display properties, but nothing had an effect.

Example: 

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

2 Answers
2

Leave a Comment