You're super close!
Right now, the aside "flex-aside" has a flex
value of: 1 1 5rem;
.
That property is a shorthand for three separate properties:
flex-grow
: controls how an element expands to fit the available space in relation to its siblings
flex-shrink
: controls how an element shrinks
flex-basis
: defines the ideal starting size of an element; i.e. try to be this size unless growing/shrinking is enabled and extra room is available.
Your aside therefore grows and shrinks at a rate of 1, while the center article grows and shrinks at a rate of 10. The left column is also a rate of 1. So the left and right columns will each effectively be 1/12th of the available width, while the center will be 10/12 of the width. The secret is to add up all the flex grows and that becomes the denominator of the fractional sizes when there is available space. Here's a great in-depth look at all the Flex properties from Kevin Powell.
To disable the sizing change, just disable growing and shrinking on the aside. flex: 0 0 5rem;
, though you may need to adjust the flex-basis
size to something more appropriate; currently the flex-grow
is making the right column bigger than its basis size.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…