Div с динамической шириной до динамического числа div, которые плавают вверх

У меня проблема с попыткой заставить CSS работать так, как я этого хочу. Ниже вы найдете 2 фотографии и описание того, как должно выглядеть поведение. Все CSS и контент динамически создаются, поэтому любая форма "гибкости" выполнима, хотя, если это возможно, следует избегать.

RED div имеет динамическую ширину (ширина: авто) и должен быть заполнен связкой BLACK div. Количество черных divs является случайным, или, скорее, зависит от случая к случаю.

Picture1 и Picture2 показывают, как меню должно расширяться, если количество черных divs занимает больше места, чем одна высота (которая фиксируется до 720px). Если понадобится третья колонка, она снова должна быть расширена влево.

Я искал и нашел этот CSS:

#redDiv {
-moz-column-count: 2; 
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 3;
column-gap: 50%;
}

однако есть три проблемы:

Во-первых, количество столбцов должно быть исправлено таким образом, и мне нужно, чтобы он динамически соответствовал содержимому, которое заполняет его.
Во-вторых, я не думаю, что это должно быть сделано с динамическими ширинами div, главным образом потому, что разрыв и ширина не имеют смысла там.
Наконец, даже если я использую javascript для определения количества столбцов, таблица расширяется вправо, и мне нужно, чтобы он расширялся влево, потому что он состыковался с правой стороной экрана, при этом некоторые элементы управления были есть.

EDIT: (js скрипка) ОБНОВЛЕНО

HTML:

<div id="rightdocked">
  <div id="RedDiv">
    <div class="blackdivs"></div>
    <div class="blackdivs"></div>
    <div class="blackdivs"></div>
    <div class="blackdivs"></div>
    <div class="blackdivs"></div>
  </div>
</div>

CSS

.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
}

Любые предложения?

Ответы

Ответ 1

Вот вам какой-то код, чтобы вы начали. Думаю, это то, что вы хотели. Я сохранил максимальную высоту до 120 пикселей для демонстрации, вы можете изменить ее на 720 пикселей. Просто продолжайте нажимать кнопку "Добавить окно", чтобы добавить внутренние div.

$('#addBoxButton').click(function() {
  $('.outer').append('<div class="inner">innner</div>');
});

.outer {
  border: 1px solid red;
  max-height: 120px;
  width: inherit;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: column;
}
.inner {
  border: 1px solid black;
  width: 50px;
  height: 20px;
  margin: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class='outer'>
</div>
<input id="addBoxButton" type="button" value="add box" />

Ответ 2

.red {
  border:solid 2px red;
  text-align:center;
  float:right;
   }
.black {
  border:solid 2px #000;
  display:inline-block;
  width:200px;
  margin:4px;
  height:40px;
  }
span .black:nth-child(1) {
   width:0;
  opacity:0;
  transition:0.3s;
  }
span:hover .black:nth-child(1) {
  width:200px;
  opacity:1;
}

<div class="red">
<span>
  <div class="black"></div>
  <div class="black"></div>
</span>
</div>