Fit div width to floated content [duplicate]

This question already has an answer here:

• CSS when inline-block elements line-break, parent wrapper does not fit new width 1 answer

I have a container div with multiple floating elements in it. I am trying to make the container width fit the content. I now have a jsFiddle that initially fits the container to the content:

However, as soon as the screen width becomes smaller and the content divs have no space to be displayed on the same line, this happens:

This is my code:

.container {

  border: 1px solid red;

  display: table;

}

.content {

  border: 1px solid blue;

  width: 100px;

  height: 100px;

  float: left;

}

<div class="container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div style="clear:both"></div>
</div>

What should happen is that when the 3rd content div goes to the next row, the container div should become smaller to fit the content. How can i make the container width to fit the content in all cases?

Edit to clarify: The child-divs are behaving correctly. This question is only about changing the width of the container.