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-28T02:25:53.030

496

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 '22 at 02:25

answered Oct 19 '16 at 20:44

Michael Benjamin

346,931
104
581
701

2

Thanks for the thorough explanation. Been using flex for a while now, but there are a lot of details that one can easily miss. – Deshen Jun 20 '21 at 20:56
by some reason didn't work here: https://jsfiddle.net/b8zd37st/ – MAZ Sep 19 '21 at 15:43
Thanks for this. What's wrong with using `inline-flex` to prevent the flex box from taking the parent's width? – Crashalot Sep 27 '22 at 23:56
1

@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`. https://jsfiddle.net/uvrja2e3/ – Michael Benjamin Sep 28 '22 at 02:21
1

@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. – Michael Benjamin Sep 28 '22 at 02:28

score 29 · Answer 2 · edited Jun 29 '22 at 15:28

29

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 '22 at 15:28

danronmoon

3,814
5
34
56

answered May 09 '20 at 16:04

Temani Afif

245,468
26
309
415

Kerry Johnson · Answer 3 · 2022-07-21T15:43:36.373

4

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 '22 at 15:43

answered Jul 20 '22 at 19:44

Kerry Johnson

842
9
16

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

3 Answers3

Linked

Related