Is flexbox grow affected by flexbox-basis?

Question

I have the following HTML

<div class="container">
  <div class="box box1">one </div>
  <div class="box box2">two </div>
  <div class="box box3">three </div>
  <div class="box box4">four </div>
  <div class="box box5">five </div>
  <div class="box box6">six </div>
</div>

and styled it with this CSS using flexbox

.container {
  display:flex;
  flex-wrap:wrap;
}

.box {
  flex-basis:500px;
  flex-grow:1;
}

.box3 {
  flex-grow:10;
}

I was assuming that flex-grow:10; would make box 3 10 times larger that box 4 that lands in my screen, but I see this:

Why is this not 10 times bigger?

Here is relative CodePen

Here is a good explanation of what's happening: https://css-tricks.com/flex-grow-is-weird/ — Pete, Jan 22 '18 at 11:41
Because `flex-basis` is the **initial** width *before* other flex properties are affected. It's not clear what it is you are trying to do. Why are you using `flex-basis` at all? — Paulie_D, Jan 22 '18 at 11:41
`flex-grow` goes from 0 to 1 and it only defines the ability for the flex item to grow. Check this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Ferran Buireu, Jan 22 '18 at 11:57
@FerranBuireu That is incorrect. `flex-grow` define how many parts each items should get from the space left, in this case, based on the screenshot, 10/11 and 1/11 on the row with `box3`. — Asons, Jan 22 '18 at 12:28

Asons · Accepted Answer · 2018-01-22T12:50:01.773

Is flex-grow affected by flex-basis?

In a way, yes, as what flex-grow does is to distribute the space left, after the size of the items been reduced, where the items can be sized either by content or explicit set.

E.g., if the parent is 1000px wide, has 2 children where each child is 300px wide, the space left will be 1000px-300px-300px = 400px.

If one child has a flex grow value of 1 and the other has 10, the former will be 300px+(1/11*400px) and the latter 300px+(10/11*400px)

Read more here about flex-grow

So in your case, where each item is set to 500px using, 2 per row, when there will be space left, that space will be shared equally on all row but the one with box3. On that row the space will be shared with 10/11 for box3 and 1/11 for the other.

In case of 3 items per row, the shared for box3 would be 10/12 and the other two 1/12 each.

Why is this not 10 times bigger?

In this case, when a width is set on the item's, flex-grow distribute the free space left among the items.

If you want to use flex-grow to size the items, give them a flex-basis of 0. That will make the calculations for flex-grow believe the items is empty, and by that it would be 10 times bigger.

/* We start writing out flexbox here. The above is just page setup */
.container {
  display:flex;
  flex-wrap:wrap;
}

.box {
  flex-basis:0;
  flex-grow:1;
  overflow: hidden;        /*  to allow items to be smaller
                               than its content  */
}

.box3 {
  flex-grow:10;
}


/* CSS Normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

/* Box-sizing border-box */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


/* Some default styles to make each box visible */
.box {
  color:white;
  font-size: 50px;
  text-align: center;
  text-shadow:4px 4px 0 rgba(0,0,0,0.1);
  padding:10px;
}

/* Colours for each box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

<div class="container">
  <div class="box box1">one </div>
  <div class="box box2">two </div>
  <div class="box box3">three </div>
  <div class="box box4">four </div>
  <div class="box box5">five </div>
  <div class="box box6">six </div>
</div>

Is flexbox grow affected by flexbox-basis?

1 Answers1