显示：内联框和填充剩余高度

Question

＆＃13;

＆＃13;

.container{
width:100%;
height:100%;
background:red;
}

body, html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.box{
  display:inline-block;
  width:15%;
  height:50%;
  background:black;
  vertical-align:top;
  border:1px solid blue;
}
*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  font-size:0;

}
.one{
  height:30%;
}
.two{
height:70%;
}

＆＃13;

<div class="container">
  <div class="box">
    
    
  </div>
  <div class="box one"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box two"></div>
  <div class="box"></div>
  <div class="box"></div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

是否有可能让底部的div开始顶部的小div开始？
我打算通过制作列然后将它们分成2个div来实现这一点，但我想知道除了flexbox和其他JS库之外是否还有其他方法。此外，没有像margin-top那样的噱头：底部div上的-50px。寻找流动的解决方案。