使用具有动态高度的CSS的子DIV标记对齐

Question

垂直和水平对齐div标签很容易实现，但我正在寻找的是附加图像，其中子div标签的高度根据内容而变化。我尝试了很多东西但却无法实现相同的行为。当然我在某处错了。

道歉，如果这是一个重复的帖子，因为我找不到任何地方。

感谢您的指导。

#divContainer {
  width: 100%;
  margin: 0 auto;
}
#divContainer div.innerDIV {
  border: 1px solid #000;
  width: 200px;
  height: auto;
  margin: 5px;
  padding: 5px;
  /*float: left;*/
  display: inline-flex; /* tried many other options */
}

<div id="divContainer">
  <div class="innerDIV">not much text here</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
</div>

预期结果：

Answer 1

尝试使用CSS列：

#divContainer {
  width: 100%;
  margin: 0 auto;
  -webkit-columns: 200px 2;
  -moz-columns: 200px 2;
  columns: 200px 2 5px; }
#divContainer div.innerDIV {
  border: 1px solid #000;
  width: 200px;
  height: auto;
  padding: 5px;
  margin: 5px 0;
}

<div id="divContainer">
  <div class="innerDIV">not much text here</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
</div>