How to Make Flex Items Take the Content Width

You can make flex items take the content width instead of the width of the parent container with CSS properties. The problem is that a flex container’s initial setting is align-items: stretch; meaning that items expand to cover the container’s full length along the cross axis.

We suggest one of the following methods to overcome this problem: you can use either the CSS align-items or align-self property.

Solution with the CSS align-items property

Let's start our example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        background: #b5bab6;
        height: 150px;
        display: flex;
        flex-direction: column;
        padding: 10px;
      }
      a {
        padding: 10px 40px;
        background: #55e6e0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <a href="#">Some text</a>
    </div>
  </body>
</html>

Try it Yourself »

In the code above, we have an <a> element within a container <div> .

Let's give some styles to our container div:

background: #b5bab6 to make it clear
height: 150px simply giving a height of 150 px
padding: 10px making a bit room for container children (a tag in this example)
display: flex and flex-direction: column to make container div a flex container and make its direction to be like column

For our <a> tag :

padding: 10px 40px 10px padding of top & bottom, plus 40px on left & right to make it a bit larger
background: #55e6e0 to make it easier to distinguish between container and a tag

Let's see what we've got so far and actually see our problem here:

Some text

Now we can see the problem. The a tag takes the entire width of its container! Let's fix it asap!

We just need to add align-items: flex-start to the container class:

.container {
  background: #b5bab6;
  height: 150px;
  flex-direction: column;
  padding: 10px;
  display: flex;
  align-items: flex-start; /* add this line */
}

Here's what we've got:

Some text

Note that you can use other properties like flex-end or center, here we just aimed to change the default behavior of align-items in CSS flex box, which is stretching and getting the whole width of its container as we saw before in our example.

Solution with the CSS align-self property

Instead of the align-items property, in our next example, we use the align-self property set to "flex-start" on the flex item.

Example of making a flex item take a content width by using the align-self property:

.container {
  background: #d1d1d1;
  height: 150px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  padding: 10px 40px;
  background: #ed8aeb;
  align-self: flex-start; /* add this line */
}

Both the align-items and align-self properties do the same. The difference is that align-items applies to the flex container, while align-self applies to flex items.

As a last step, you may ask yourself what if we had more than one element inside the container div, something like this :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        background: #b5bab6;
        height: 150px;
        flex-direction: column;
        padding: 10px;
        display: flex;
        align-items: flex-start;
      }
      a {
        padding: 10px 40px;
        background: #55e6e0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <a href="#">Some text</a>
      <a href="#">Some text</a>
      <a href="#">Some text</a>
      <a href="#">Some text</a>
      <a href="#">Some text</a>
      <a href="#">Some text</a>
      <a href="#">Some text</a>
    </div>
  </body>
</html>

Try it Yourself »

And here's the result:

Some text Some text Some text Some text

Oops! Now we faced another problem! It's out of our container, and also we need some sort of space between our elements to preventing to collapse like how it is right now.

So we'll add gap property to add some space between the elements, and using flex-wrap: wrap to wrap the elements to the next line while it does not have enough space to place itself inside the container

So we'll add these lines of code to our container style:

.container {
  background: #b5bab6;
  height: 150px;
  flex-direction: column;
  padding: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px; /* add this line */
  flex-wrap: wrap; /* add this line */
}

And the result will be: