基于内部元素的DIV高度为GROW UP

Question

HTML：

<div id="wrapper">

  <div id="left" style="position: relative; min-height: 300px;">
    <div id="fullBarrels" style="position: absolute; bottom: 0;">
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
    </div>
  </div>

  <div id="center">
    <img src="70.png" />
  </div>

  <div id="right">
    <div class="emptyBarrels">
      <div class="emptyBarrel">
        <img class="barrel" src="Used.png" />
      </div>
    </div>
  </div>

</div>

CSS：

#wrapper {
  background: orange;
  margin: 8em auto 1em auto;
  max-width: 1000px;
  padding: 10px;
  overflow: hidden;
}

#center {
  background: red;
  float: left;
  height: 300px;
  width: 30%;
}

#center img {
  height: 300px;
}

#left {
  background: yellow;
  float: left;
  width: 35%;
}

#right {
  background: brown;
  float: left;
  width: 35%;
}

#message {
  background: gray;
  margin: 0 auto;
  max-width: 1000px;
  padding: 10px;
}

.fullBarrel {
  float: left;
  display: inline-block;
  height: 100px;
  background: blue;
  margin: 0.5em 0.5em 0 0;
}

.emptyBarrel {
  float: right;
  height: 100px;
  background: green;
  margin: 0.5em 0 0 0.5em;
}

img.barrel {
  height: 100px;
}

如何使用其中的内容使黄色div（id =“left”）长大？这些物品是从下往上添加的 - 正确的，但黄色的div不会超过最小高度，这会使内部元素被切断。

了解蓝色divs如何超越黄色？但是，它们与黄色div的底部对齐。我想让蓝色的底部与黄色对齐，并使黄色长大，以便为额外的蓝色（以及橙色包装纸）腾出空间。黄色div的高度似乎固定为min-height，即使它没有实际高度。

Answer 1

使用flex解决了这个问题并且不会引起任何头痛。强烈推荐。

Answer 2

尽量不要定义 #wrapper 的高度。应该这样做。我想。

编辑：另一种方法（说实话并不是那么干净）就是将所有内容都包装在表格单元格中。这些调整到它们的高度和宽度的内容。但是，如果width="100%"，则应该没有问题。