Aligning to the bottom in flexbox

by

You need to make the parent a flex container:

.flex-list .flex-row .flex-item-wrapper .flex-item {
    width: 100%;
    height: 100%;
    display: flex;                      /* new */
    flex-direction: column;             /* new */
}

Then, tell the .caption element to fill available height:

.caption { flex: 1; }

Revised Fiddle

It’s a common question. Here are other options:

More Related Contents:

  1. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  2. Make container shrink-to-fit child elements as they wrap
  3. Flexbox code working on all browsers except Safari. Why?
  4. One flex/grid item sets the size limit for siblings
  5. How to center a flex container but left-align flex items
  6. Left column and stacked right column using flexbox CSS [duplicate]
  7. flex property not working in IE
  8. Align an element to bottom with flexbox
  9. Change div order with CSS depending on device-width
  10. Force flex item to span full row width
  11. input / button elements not shrinking in a flex container
  12. Flexbox and Internet Explorer 11 (display:flex in ?)
  13. What’s the difference between flex-start and baseline?
  14. Removing margin from flex items when they wrap
  15. ‘position: sticky’ not working when ‘height’ is defined
  16. Calculator keypad layout with flexbox
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Flex item should align left, not center, when it wraps
  19. Flexbox affects overflow-wrap behavior
  20. How to align flexbox columns left and right?
  21. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  22. Flexbox resize and scrollable overflow [duplicate]
  23. Prevent a child element from overflowing its parent in flexbox [duplicate]
  24. Why isn’t position:sticky with left:0 working inside a scrollable container?
  25. Chrome does not expand flex parent according to children’s content [duplicate]
  26. Flexbox with fixed header and footer and scrollable content
  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