当div向下移动时，调整其余部分的大小以占用剩余空间

Question

I have three (but the problem is applicable to any amount) divs that have a percentage width and scale with the size of their container but have a minimum width where they will move down in the container. Here is an example of the current scenari:

div {
  float: left;
  width: 33%;
  min-width: 300px;
  height: 300px;
  margin-right: 2px;
}

<div style="background: red"></div>
<div style="background: green"></div>
<div style="background: blue"></div>

http://jsfiddle.net/ULLBr/

I was wondering if it was possible for the remaining elements to scale then to take up the remaining whitespace on the 'row'?

I know this could be achieved in javascript but a pure CSS solution would be much appreciated, however if that is not possible what would be the best way to approach it in javascript?

Ideally either solution should be able to handle n divs.

Thank you.

Answer 1

I would suggest you take a look at flex box.

I have created a jsfiddle here which I think is what you are trying to achieve. Also worth looking at and where I adapted it from is css tricks great site.