How do I set this div to be the minimum possible width to display its floating contents?

Question

Problem

I have "boxes" that float left so that I can display them in a line until they need to wrap. This works well, but my coloured background doesn't shrink to the minimum, it expands to the maximum.

JSFiddle

http://jsfiddle.net/RLRh6/

(Expand and shrink the Result section to see the effect)

HTML

<div class="container">
    <div class="boxes">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

.container {
    background: #fcc;
    margin: 0 auto;
    max-width: 300px;
}

.boxes {
    background: #cfc;
    overflow: hidden;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 2px;
}

What I Get

Note the extra green colour, right of the boxes:

Example 1

Example 2

What I Want

Example 1

Example 2

Question

Is it possible to have the green-background div (".boxes") shrink to the minimum possible size to display the boxes without Javascript? You should be able to shrink and expand the div freely and not see any green to the right of the boxes.

Answer 1

Working DEMO http://jsfiddle.net/RLRh6/56/

If you want to achieve this only with html, css, should use media queries.

CSS

.container {
    margin: 0 auto;
    min-width: 76px;
    max-width: 228px;
}
@media only screen and (min-width: 76px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 76px;
  }
}
@media only screen and (min-width: 152px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 152px;
  }
}
@media only screen and (min-width: 228px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 228px;
  }
}
.boxes {
    float:left;
    background: #cfc;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 2px;
}

Answer 2

Remove the min-width from the .container and add display:inline-block;

also if you want to center the .container then wrap the .container with a div and apply text-align:center to it.

.container {
    background: #fcc;
    margin: 0 auto;
   display:inline-block;
}

jsFiddle Link