css - Flexbox column layout wrap with fixed height doesn't stretch the parent inline-block container -

i'm laying out list of items flown top-to-bottom multiple columns. therefore, flexbox adjusts width automatically add more items. parent inline-block div isn't stretched child flexbox. seems bug in css me.

you can see in fiddle: https://jsfiddle.net/dnc8h57n/

html:

<div class="container">     <div class="flexbox">         <div class="child"></div>         <div class="child"></div>         <div class="child"></div>         <div class="child"></div>         <div class="child"></div>         <div class="child"></div>         <div class="child"></div>         <div class="child"></div>     </div> </div> 

and css:

.child {     display: inline-block;     width: 100px;     min-height: 100px;     height: 100px;     background-color: #e46119;     border: 1px solid #626262;     margin: 3px;     flex: 1; }  .flexbox {     display: -webkit-flex;     display: flex;      flex-wrap: wrap;     -webkit-flex-wrap: wrap;      flex-direction: column;     -webkit-flex-direction: column;      justify-content: flex-start;     -webkit-justify-content: flex-start;      align-items: flex-start;     -webkit-align-items: flex-start;      height: 400px;     background-color: #dce7f2;     border: 1px solid #2a4f73; }  .container {     display: inline-block; } 

looks it's bug. see issue more info. https://code.google.com/p/chromium/issues/detail?id=247963 (it's same behaviour both in chrome , firefox). guess i'll close now, until fix it.