Does flex-grow get influenced by flex-basis?
Indeed, to some extent it does because the purpose of flex-grow is to allocate the remaining space, after adjusting the size of the items, where the items can be sized based on content or explicitly set.
For example, if the parent element is 1000px wide with 2 children that are each 300px wide, the remaining space 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)
Learn more about flex-grow here and here
Therefore, in your scenario where each item is defined as 500px in width, with 2 items per row, any leftover space will be evenly distributed among all rows except for the one containing box3. In that specific row, the space will be shared with a ratio of 10/11 for box3 and 1/11 for the other item.
In the case of 3 items per row, the distribution for box3 would be 10/12, and for the other two, it would be 1/12 each.
Why isn't this 10 times larger?
In such instances, when a width is specified for the items, flex-grow allocates the remaining free space among the items.
If you want to use flex-grow to adjust the item sizes, give them a flex-basis of 0. This way, the calculations for flex-grow will assume the items are empty and result in an increase of tenfold size accordingly.
/* The actual flexbox implementation starts here. The above code sets the page up */
.container {
display:flex;
flex-wrap:wrap;
}
.box {
flex-basis:0;
flex-grow:1;
overflow: hidden; /* To allow items to be smaller than their 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;}
/* Implementing box-sizing border-box for all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* Initial styling 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;
}
/* Assigning colors to each box element */
.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>