Make flex item take content width, not full width of parent

Question

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>

http://codepen.io/donpinkus/pen/YGRxRY

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Solution

Instead of display: inline-flex, give the anchor element align-self: flex-start.

Explanation

An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.

The align-self property does the same thing as align-items, but the former applies to flex items while the latter applies to the container. By default, align-self inherits the value of align-items.

Since your container is flex-direction:column, the container's cross axis is horizontal, and align-items:stretch is expanding the anchor element as much as it can.

You can override the default with align-items:flex-start on the container (which would be inherited by all flex items) or align-self:flex-start on the flex item (which is confined to the single item).

More information:

Make flex item take content width, not full width of parent

Solution

Explanation

Sign up