Make flex container take width of content, not width 100%

by

Instead of display: flex on the container, use display: inline-flex.

This switches the container from block-level (which takes the full width of its parent) to inline-level (which takes the width of its content).

This sizing behavior is similar to display: block vs. display: inline-block.

For a related problem and solution see:

More Related Contents:

  1. Why don’t flex items shrink past content size?
  2. Targeting flex items on the last or specific row
  3. Fill the remaining height or width in a flex container
  4. How to vertically align text inside a flexbox?
  5. Equal height rows in a flex container
  6. How to specify line breaks in a multi-line flexbox layout?
  7. How to Right-align flex item?
  8. How to remove the space between inline/inline-block elements?
  9. How to add 1px margin to a flex item that is flex: 0 0 25%?
  10. flex container min-height ignored in IE
  11. Keep the middle item centered when side items have different widths
  12. Maintain image aspect ratio when changing height
  13. float does not work in a flex container
  14. How can I have two fixed width columns with one flexible column in the center?
  15. Is there a way to remove a div but keep its elements?
  16. CSS grid – maximum number of columns without media queries
  17. All widths set to width of widest element
  18. 5 items per row, auto-resize items in flexbox
  19. flex-grow not working in column layout
  20. CSS – How to have children in different parents the same height?
  21. Why does flexbox stretch my image rather than retaining aspect ratio?
  22. How to make a sticky footer using flexbox in IE11?
  23. Height of flex container not working properly in Safari
  24. Flexbox, z-index & position: static: Why isn’t it working?
  25. Pin a flex item to the bottom of the container
  26. Aligning to the bottom in flexbox
  27. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  28. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment