CODEWITHSUNDEEP
cssflexboxflex-grow
Ethan C
Ethan C

Reputation: 1528

Do I not understand the flex-grow property?

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?

http://jsfiddle.net/nrur6mmo/

.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>

Upvotes: 72

Views: 69175

Answers (4)

William Hou
William Hou

Reputation: 1781

Something related: Order matters. For example:

html:

 <div class="container">
    <div class="el el-1">One</div>
    <div class="el el-2">two</div>
    <div class="el el-3">three</div>
    <div class="el el-4">four</div>
    <div class="el el-5">five</div>
    <div class="el el-6">six</div>
    <div class="el el-7">seven</div>
    <div class="el el-8">eight</div>
 </div>

css:

 .container {
     display: flex;
 }

The following style works:

 .el {
    flex-grow: 1;
 }

 .el-4 {
    flex-grow: 3;
 }

But if you change the order, it will NOT work:😲

 .el-4 {
    flex-grow: 3;
 }

 .el {
    flex-grow: 1;
 }

Upvotes: 0

wilcus
wilcus

Reputation: 859

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

Upvotes: 15

cimmanon
cimmanon

Reputation: 68339

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

Upvotes: 37

Natsu
Natsu

Reputation: 2185

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

Upvotes: 102

Related Questions