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

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.

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?

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


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>

Tags:

Html

Css

Flexbox

Recent Posts