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

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

Michael Benjamin · Accepted Answer · 2022-09-28 02:25:53Z

553

Use align-items: flex-start on the container, or align-self: flex-start on the flex items.

No need for display: inline-flex.

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, except that align-self applies to flex items while align-items applies to the flex container.

By default, align-self inherits the value of align-items.

Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretch is expanding the child element's width as much as it can. (The column setting is also the reason why display: inline-flex isn't working.)

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

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

edited Sep 28, 2022 at 2:25

answered Oct 19, 2016 at 20:44

Michael Benjamin

375k110 gold badges616 silver badges737 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Deshen Over a year ago

Thanks for the thorough explanation. Been using flex for a while now, but there are a lot of details that one can easily miss.

MAZ Over a year ago

by some reason didn't work here: jsfiddle.net/b8zd37st

Crashalot Over a year ago

Thanks for this. What's wrong with using inline-flex to prevent the flex box from taking the parent's width?

Michael Benjamin Over a year ago

@MAZ, didn't work because your flex container is in row direction (unlike in the question which is column). Hence, the align-* properties, which work along the cross axis, move items vertically in your layout, not horizontally. In your case, use display: inline-flex. jsfiddle.net/uvrja2e3

Michael Benjamin Over a year ago

@Crashalot, it won't work because the container is set to flex-direction: column. There would be nothing wrong with "using inline-flex to prevent the flex box from taking the parent's width", if the container were in row direction.

danronmoon · Accepted Answer · 2022-06-29 15:28:31Z

32

In addition to align-self you can also consider auto margin which will do almost the same thing

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

edited Jun 29, 2022 at 15:28

danronmoon

3,8735 gold badges36 silver badges58 bronze badges

answered May 9, 2020 at 16:04

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Comments

Kerry Johnson · Accepted Answer · 2022-07-21 15:43:36Z

12

width: min-content also yields the same result. Not supported in IE11 if that matters to you: https://caniuse.com/mdn-css_properties_width_min-content

edited Jul 21, 2022 at 15:43

answered Jul 20, 2022 at 19:44

Kerry Johnson

1,07211 silver badges17 bronze badges

1 Comment

Alan Over a year ago

Only way I was able to tame a DETAILS tag - brilliant - thank you.

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related