I have two div's, wrapped inside one container div. The bottom div contains a dynamically filled table (with variable width), which determines the overall width of all div's.

In the top div, I want to list several small red blocks (div's or span's or whatever). These red blocks need to take the available horizontal space, but wrap to a new line if they reach the max allowed width. 

So this is what I want to achieve:

[![enter image description here](https://i.stack.imgur.com/Gazij.png)](https://i.stack.imgur.com/Gazij.png)

Unfortunately, I can't make it work. No matter how I CSS the red blocks (small floating div's, or inline-block's), they keep on taking more width than allowed. As a result, all div's become a lot wider than allowed, wider than my table:

[![enter image description here](https://i.stack.imgur.com/a3GJ7.png)](https://i.stack.imgur.com/a3GJ7.png)

How can I force these red blocks to only use the allowed with, and pick a new line if they run out of space?

Thanks!

**UPDATE:**
Here's a working example that shows the red blocks (which have variable length) next to each other, taking up more width than they are allowed. They need to start on a new line as soon as the table's width is reached.
<http://codepen.io/anon/pen/bqobGp?editors=1100#0>

```
table td{
  border:thin solid gray;
  line-height:25px;
  padding:0 5px;
}
.div1, .div2 {
  margin-top:15px;
  padding:20px;
  background:white;
  box-shadow:2px 0 3px rgba(0,0,0,.12)
}
.container {
  display:inline-block;
  background:#f1f1f1;
  padding:30px; 
}
.badge {
  line-height:30px;
  background:red;
  min-width:150px;
  color:white;
  margin:5px 10px;
  text-align:center;
  font-family:sans-serif;
  border-radius:5px;
  display: inline-block;
}

```