I have a container
<div>
display: flex
<a>
display: inline-flex
.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>
Instead of display: inline-flex
, give the anchor element align-self: flex-start
.
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
, but the former applies to flex items while the latter applies to the container. By default, align-self
inherits the value of align-items
.
Since your container is flex-direction:column
, the container's cross axis is horizontal, and align-items:stretch
is expanding the anchor element as much as it can.
You can override the default with align-items:flex-start
on the container (which would be inherited by all flex items) or align-self:flex-start
on the flex item (which is confined to the single item).
More information: