Do I not understand the flex-grow property?

Question

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

Answer 1

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?