Div with dynamic width sized to dynamic number of divs that float top
<p>I have an issue trying to force the CSS to work the way I want it to. Below you will find a 2 pictures and a description of what the behaviour should be like. All the CSS and content is dynamically created so any form of "flexibility" is doable, though if possible, should be avoided.</p>

<p><a href="https://i.stack.imgur.com/oeEue.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oeEue.png" alt=""></a></p>

<p>The <strong>RED</strong> div has dynamical width (width:auto) and needs to be filled with a bunch of <strong>BLACK</strong> divs. The number of black divs is random, or rather depends on a case-to-case basis. </p>

<p>Picture1 and Picture2 show how the menu should expand in case the amount of black divs is taking more space then one height (which is fixed to 720px). In case a thrid column was to be needed, it once again should be expanded towards left.</p>

<p>I've searched around and found this CSS:</p>

<pre><code>#redDiv {
-moz-column-count: 2; 
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 3;
column-gap: 50%;
}
</code></pre>

<p>however there are three issues there:</p>

<ul>
<li>First one, the amount of columns needs to be fixed this way, and I need it to dynamically suit the content that fills it.</li>
<li>Secondly, I do not think that this is meant to be done with dynamical width divs, mainly because <strong>gap</strong> and <strong>width</strong> have no meaning there.</li>
<li>Lastly, even if I do use the javascript to determin the number of columns, the table expands to the right and I need it to expand to the left, because it is docked to the right side of the screen with some controls being there.</li>
</ul>

<h2><strong>EDIT:</strong> (<a href="https://jsfiddle.net/6e7y6zvg/2/" rel="nofollow noreferrer">js fiddle</a>) <strong>UPDATED</strong></h2>

<p>HTML:</p>

<pre><code>&lt;div id="rightdocked"&gt;
  &lt;div id="RedDiv"&gt;
    &lt;div class="blackdivs"&gt;&lt;/div&gt;
    &lt;div class="blackdivs"&gt;&lt;/div&gt;
    &lt;div class="blackdivs"&gt;&lt;/div&gt;
    &lt;div class="blackdivs"&gt;&lt;/div&gt;
    &lt;div class="blackdivs"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.blackdivs {
  position: relative;
  margin-top: 0px;
  margin-bottom: 20px;
  width: 300px;
  height: 40px;
  border: solid 2px black;
  background-color: white;
}

.blackdivs:first-of-type {
  background-color: green;
}

#RedDiv {
  max-height: 180px;
  width: auto;
  z-index: 9;
  background-color: lightgreen;
  position: relative;
  float: left;
  background-color: white;
  border: 2px red solid;
}

#rightdocked {
  position: relative;
  width: auto;
  height: 300px;
  float: right
}
</code></pre>

<p>Any suggestions?</p>