I have a container
padding: 10px 40px;
display: inline-flex, give the anchor element
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.
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
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).