Div With Dynamic Width Sized To Dynamic Number Of Divs That Float Top

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 conte

Solution 1:

Here is some code to get you started. I guess this is the behavior you wanted. I have kept max-height to 120px for demo, you can change it to 720px. Just keep on pressing add box button to add inner divs.

$('#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
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script><divclass='outer'></div><inputid="addBoxButton"type="button"value="add box" />

Solution 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;
}

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

Maybe this can get you started