Do I not understand the flex-grow property?
Solution 1
You have to specify a value for flex-basis
as well (not specifying this property causes behaviour similar to using the initial value, auto).
Add flex-basis: 0;
to both children or just set it with the shorthand:
.flex-item {
flex: 1; /* flex-basis is 0 if omitted */
}
.big {
flex-grow: 3;
}
http://codepen.io/anon/pen/JEcBa
Solution 2
Flex-grow is commonly misunderstood in this way. Flex-grow only controls how the left over space is distributed between flex items, not how big they are in proportion to each other.
What you're looking for is really just this:
.flex-item {
width: 25%;
list-style-type:none;
border:1px solid black;
}
.big {
width: 75%;
}
See also
- Flex-grow not working as expected (flex items don't have the widths I expect)
- In what circumstances is flex-shrink applied to flex elements and how does it work?
Solution 3
Authors are encouraged to control flexibility using the flex shorthand rather than with flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
https://drafts.csswg.org/css-flexbox/#propdef-flex-grow
.flex-item {
flex: 1;
}
.big {
flex: 3;
}
This is a working example
http://codepen.io/anon/pen/VjZYPV
Ethan C
BA Computer Science from Drake University, 2014 Owner of Sterner Stuff Design Experience in: PHP, Javascript, jQuery, Angular, WordPress, Laravel, Vue.js, Yii, HTML, CSS
Updated on July 09, 2022Comments
-
Ethan C almost 2 years
I'm afraid I must not understand flex-grow. If you jump to the JSFiddle below - the way I understand it,
.big
should be three times the size of the other.flex-item
. As you can see, not so. Why?.flex-container { display:flex; padding:0 20%; } .flex-item { flex-grow:1; list-style-type:none; border:1px solid black; } .big { flex-grow:3; }
<ul class="flex-container"> <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li> <li class="flex-item">Not really working like expected I don't think...</li> </ul>