title: Prevent elements from extending their parent DIV
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>So this is what I want to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/Gazij.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gazij.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/a3GJ7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a3GJ7.png" alt="enter image description here"></a></p>
  
  <p>How can I force these red blocks to only use the allowed with, and pick a new line if they run out of space?</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPDATE:</strong>
  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.
  <a href="http://codepen.io/anon/pen/bqobGp?editors=1100#0" rel="nofollow noreferrer">http://codepen.io/anon/pen/bqobGp?editors=1100#0</a></p>
  
  <pre><code>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;
  }
  </code></pre>