title: Expand divs to fill parent element but not exceed max width
body: <p>I'm trying to set minimum and maximum width/height on left floated divs and have them expand to fill the parent element (body). I was wondering if there is a way to achieve this with css, and if not, maybe I could use some JS. </p>
  
  <p>To imagine this effect, start resizing the window and you will notice that there will be an empty space on the right of the divs until the space is large enough for some of the divs to shift into it. What I would like to do is have all the divs expand to fill out the empty space until maximum is reached and it is time to pop in more divs there at which point the size of the divs will readjust based on how many are in the row. </p>
  
  <p>In the end I want to have these divs never to be more than maximum width or less than minimum width but be self adjusting within those limits to fill entire width of the body</p>
  
  <p>Here is the example code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;style&gt;
        .imageitem {
          background-color: blue;
          margin: 0 5px 5px;
          min-width: 200px;
          min-height: 200px;
          max-width: 250px;
          max-height: 250px;
          float: left;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
      &lt;div class="imageitem"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>