Shrink flex item to fit content

Question

Here's a sample:

body {
  display: flex;
  flex-direction: column;
}

a {
  background: lightGreen;
}

<a href="#">This is some text.</a>

The <a> element stretches as long as the page width. How can we shrink it so it fits the content?

Answer 1

Align the flex items to the start side of the cross-axis. See https://css-tricks.com/snippets/css/a-guide-to-flexbox.

body {
  display: flex;
  flex-direction: column;
  align-items: start;
}

a {
  background: lightGreen;
}

<a href="#">This is some text.</a>
<a href="#">This is some longer text.</a>