html - Overflow:auto with float AND overflow:visible

Question

box-shadowコンテナーの外側に影を表示するために、2 つのフローティング div を作成しようとしています。親がoverflow: auto設定されているため表示されず、影が切り取られますが、両方divの子が浮いているために親が折りたたまれないようにする必要があります。親を設定するoverflow: visibleと、子が浮かんでいるため、明らかに折りたたまれます。助けてくれてありがとう。
JS フィドル: http://jsfiddle.net/zJGVz/

HTML

<div id='parent'>
  <div id='child1'></div>
  <div id='child2'></div>
</div>

CSS:

#parent {
  margin: 0 auto;
  width: 200px;
  background: green;
  overflow: auto;
}
#child1 {
  width: 150px;
  height: 200px;
  float: left;
  background: pink;
  box-shadow: 0 0 10px 0 #000000;
}
#child2 {
  width: 30px;
  height: 200px;
  float: left;
  margin-left: 20px;
  background: blue;
  box-shadow: 0 0 10px 0 #000000;
}

Answer 1

margin親の端に接する側の両方の子に5px を追加できます。

#child1 {
  width: 700px;
  float: left;
  box-shadow: 0 0 5px 0 #000000;
  margin:0 0 5px 5px;
}
#child2 {
  width: 300px;
  float: left;
  box-shadow: 0 0 5px 0 #000000;
  margin:0 5px 5px 0;
}

JSFiddle を参照してください。

Answer 2

オーバーフローを「可視」に変更してみてください

overflow: visible;