CSS - Multiple Columns with min-width & max-width

Question

I'm having a bit of a "moment" where I am stumped on an issue I thought should be pretty easy (and probably is, I'm just over complicating I'm sure).

I'm looking to have a div with multiple children div's; the children should automatically expand or contract based on the number there are (the site I'm working on is in a CMS that allows a user to add or remove items).

My issue is having the div's respect the min- and max-width declaration. I have a hunch that it could be something to do with them being float:left, but I've tried a few other variations with no luck.

My main objective is to get these columns to fill their space on one "row", up to 4 columns.

EDIT: I need to have these columns be a minimum width, as well as a maximum width. So if there are 3 child div's, they should all be wider than if there were 4 child div's.

Here is an example of my code: http://codepen.io/joe/full/IJvGp

HTML

<div class="sub cf">
  <div class="row">
      <div class="col">
          Column 1
      </div>

    <div class="col">
        Column 2
      </div>

      <div class="col">
        Column 3
    </div>

    <div class="col">
        Column 4
    </div>
  </div>
</div>

CSS

.sub {
  width: 670px;
  background: #fff;
  border: 10px solid #414042;
}

.sub .row {
  padding: 0;
  float: left;
  width: 100%;
}

.sub .row .col {
  min-width: 166px;
  max-width: 222px;
  width: 100%;
  float: left;
  border-right: 1px solid #D0D2D3; 
  margin: 0;
  padding: 0;
}


.cf::before, .cf::after {
  content: "";
  display: table;
}
.cf::after {
  clear: both;
}

Answer 1

With jquery you could dynamically set the column widths as a % based on the number of columns within the row.

var colWidth = (1 / $('.sub.cf .row').children().length * 100) + '%';
$('.sub.cf .col').outerWidth(colWidth);​

working fiddle. Insert or remove more columns and rerun it to see how it works.