html - 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 没有增长到超过最小高度，这使得内部元素被切断。

看看蓝色 div 是如何超越黄色的？不过，它们与黄色 div 的底部对齐。我想让蓝色的底部与黄色对齐，让黄色长大，以便为额外的蓝色(以及橙色 wrapper )腾出空间。黄色 div 的高度似乎固定为 min-height，即使它没有实际高度。

Answer 1

使用 flex 可以解决这个问题并且不会引起任何麻烦。强烈推荐。