html - height:auto が 2 つの浮動要素で機能しないのはなぜですか?

Question

div#inner1とはのdiv#inner2中にありますdiv#outerが、 の高さはdiv#outer0px として表示されheight:autoます。

外側の div の子要素の高さを取得するにはどうすればよいですか?

これは私のコードです：

#outer {
  width: 300px;
  height: auto;
  background: #ccc;
}

#inner1 {
  float: left;
  width: 100px;
  height: 100px;
  background: #f00;
}

#inner2 {
  float: left;
  width: 100px;
  height: 100px;
  background: #0f0;
}

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>

Answer 1

overflow:autoid で div に追加しouterます。これで問題は解決します。

デモ