css - Several floating DIVs and the last one filling remaining space -

there several floating divs, here: http://jsfiddle.net/yykxb/ how make last div.verylast filling remaining space? of course width of space vary depending on numer of rows , columns divs arrange in actual window width.

how without js?

maybe there perfect match flex, did come "close" fixed width each item:

body > div {     display: -webkit-flex;     display: flex;     -webkit-flex-wrap: wrap;     flex-wrap: wrap; }  body > div > div {     -webkit-flex-basis: 200px;     border-top: 1px solid black;     margin: 5px;     display: -webkit-flex;     display: flex;     -webkit-flex-grow: 0;     flex-grow: 0; }  .verylast {     -webkit-flex-grow: 1;     flex-grow: 1; } 

here fiddle.

the problem is, don't know how prevent last item grow full width of container larger sum of columns. sorry, maybe else has idea.

it work if ok flexible width, guess that's not want. have @ this fiddle.

however, aware of fact brand-new , browser support not @ all.

---

because there seems not perfect solution (css only), try go in hacky direction: maybe situation allows using media queries:

/* ... other media queries other widths */  @media screen , (max-width: 629px) {     body > div {         width: 420px;     } }  @media screen , (max-width: 419px) {     body > div {         width: 210px;     } } 

here demo. said: know it's hacky, if no 1 else can provide clean solution, maybe hacky ok. ;-)

browser compatibility: media queries have better support, there fallback old ie.