Fill the remaining height or width in a flex container

by

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it’s set to 96% which looks OK until you really squash the screen – then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

Learn more about flex alignment along the main axis here:

Learn more about flex alignment along the cross 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. Remove space (gaps) between multiple lines of flex items when they wrap
  6. Flexbox: 4 items per row
  7. How to vertically align text inside a flexbox?
  8. Absolutely positioned flex item is not removed from the normal flow in IE11
  9. Heights rendering differently in Chrome and Firefox [duplicate]
  10. flex container min-height ignored in IE
  11. Properly sizing and aligning the flex item(s) on the last row
  12. float does not work in a flex container
  13. How can I have two fixed width columns with one flexible column in the center?
  14. Flexbox not giving equal width to elements
  15. Why does percentage padding break my flex item?
  16. flex-grow not working in column layout
  17. CSS – How to have children in different parents the same height?
  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. Pin a flex item to the bottom of the container
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment