How to prevent content from re-sizing a flex item?
When you tell a flex item to flex: 3
(Item 6) or flex: 1
(Items 5 & 7), here's how that shorthand property breaks down:
flex: ? = <flex-grow>, <flex-shrink>, <flex-basis>
flex: 3 = flex-grow: 3, flex-shrink: 1, flex-basis: 0
flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0
In both cases, the flex-shrink
factor is 1, meaning the flex item is allowed to shrink proportionally.
To prevent the flex items from shrinking, which may be causing the misalignment, I would change the flex-shrink
to 0.
Instead of flex: 3
and flex: 1
try:
flex: 3 0 0;
flex: 1 0 0;
More details in the flexbox spec: 7.1.1. Basic Values of flex
But you may have another problem. You wrote:
Note that items 5 and 7 are setup the same way in css, with
flex
values of1
. I.e. item 6 is 3 times the height of items 5 and 7. As such, when item 6 resizes, the 3:1 ratio is maintained.
This is not how the flex-grow
property works.
By applying flex-grow: 3
to a flex item you are telling it to consume three times more available space than flex items with flex-grow: 1
. This does not necessarily mean Item 6 will be three times the size of Items 5 and 7.
Learn more about how flex-grow
works here: flex-grow not sizing flex items as expected
As an alternative sizing method, you may want to use the flex-basis
property. Try flex: 0 0 60%
on Item 6, and flex: 0 0 20%
on Items 5 and 7.