How to stretch flex child to fill height of the container?

by

When using Flexbox, the major mistake is to start using height: 100% all over.

We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.

The solution is simple, just remove the height: 100%, and it will work automatically.

The reason it does, is for flex item in row direction (the default), the align-items control the vertical behavior, and as its default is stretch this just work as is.

Stack snippet

<div style="display: flex">
  <div style="background-color: yellow; width: 20px">
  </div>
  <div style="background-color: blue">
    some<br> cool<br> text
  </div>
</div>

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Make grid container fill columns not rows
  7. Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
  8. Align an element to bottom with flexbox
  9. Make background color extend into overflow area
  10. Center text over an image in flexbox
  11. Force flex item to span full row width
  12. Why can’t be flex containers?
  13. Prevent flex items from rendering side to side
  14. Flexbox and Internet Explorer 11 (display:flex in ?)
  15. What’s the difference between flex-start and baseline?
  16. ‘position: sticky’ not working when ‘height’ is defined
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Text not centered with justify-content: center
  19. Flexbox affects overflow-wrap behavior
  20. Flexbox resize and scrollable overflow [duplicate]
  21. How can I show three columns per row?
  22. CSS object-fit: contain; is keeping original image width in layout
  23. How to center horizontally and vertically?
  24. Flexbox on IE11: image stretched for no reason?
  25. extra space when centering elements using flexbox
  26. Height is not correct in flexbox items in Chrome [duplicate]
  27. display: flex not working on Internet Explorer [duplicate]
  28. Image behavior within flexbox (rows embedded in columns)
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment