how to make a div occupy all the available space in flex

Sabari H answered on August 8, 2022 Popularity 3/10 Helpfulness 1/10

answer how to make a div occupy all the available space in flex

how to make a div occupy all the available space in flex

Comment

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.

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:

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: space whatever

Link to this answer
Share Copy Link

Contributed on Aug 08 2022

Sabari H

0 Answers Avg Quality 2/10

how to make a div occupy all the available space in flex

Contents

More Related Answers

how to make a div occupy all the available space in flex

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.