Donny P Donny P - 1 month ago 5
CSS Question

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

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

Answer

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: