Make flex items take content width, not width of parent container

by

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:

Learn more about flex alignment along the main axis here:

More Related Contents:

  1. Center one and right/left align other flexbox element
  2. How do I keep two side-by-side div elements the same height?
  3. How to disable equal height columns in Flexbox?
  4. Proper use of flex properties when nesting flex containers
  5. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  6. Remove space (gaps) between multiple lines of flex items when they wrap
  7. Flexbox: 4 items per row
  8. Equal height columns with CSS
  9. Absolutely positioned flex item is not removed from the normal flow in IE11
  10. How to Right-align flex item?
  11. Heights rendering differently in Chrome and Firefox [duplicate]
  12. flex container min-height ignored in IE
  13. Properly sizing and aligning the flex item(s) on the last row
  14. float does not work in a flex container
  15. Flexbox not giving equal width to elements
  16. Why does percentage padding break my flex item?
  17. flex-grow not working in column layout
  18. How to center-align one flex item and right-align another using Flexbox [duplicate]
  19. Height of flex container not working properly in Safari
  20. Why is there vertical scroll on the main container?
  21. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  22. How can I create a row-based masonry layout using CSS?
  23. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  24. How do I make flex box work in safari?
  25. Zebra striping a flexbox table with wrapping items
  26. Element with “display: inline-flex” has a strange top margin
  27. Make flex container take width of content, not width 100%
  28. justify-content: space-between failing to align elements as expected
  29. display: flex not working on Internet Explorer [duplicate]
  30. Fitting child into parent

Leave a Comment