Make flex items take content width not width of parent container

Question

I have a container  lt div gt  with display  flex  It has a child  lt a gt      How can I make the child appear  inline     Specifically  how can I make the child s width determined by its content  and not expand to the width of the parent   What I tried    I set the child to display  inline-flex  but it still took up the full width  I also tried all other display properties  but nothing had an effect    Example     x000D   x000D   container   x000D    background  red  x000D    height  200px  x000D    flex-direction  column  x000D    padding  10px  x000D    display  flex  x000D    x000D  a   x000D    display  inline-flex  x000D    padding  10px 40px  x000D    background  pink  x000D    x000D   lt div class  container  gt  x000D     lt a href     gt Test lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    http   codepen io donpinkus pen YGRxRY

User · Accepted Answer

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  quot justify-items quot  and  quot justify-self quot  properties

User · Answer

In addtion to align-self you can also consider auto margin which will do almost the same thing   x000D   x000D   container   x000D    background  red  x000D    height  200px  x000D    flex-direction  column  x000D    padding  10px  x000D    display  flex  x000D    x000D  a   x000D    margin-right auto  x000D    padding  10px 40px  x000D    background  pink  x000D    x000D   lt div class  container  gt  x000D     lt a href     gt Test lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Make flex items take content width, not width of parent container

Examples related to html

Examples related to css

Examples related to flexbox