はCSSを正常に適用できません

Question

body{ 
    background:#eff3f6; 
    border: 1px solid #C3D4DB; 
} 
.content{margin-top:1px; 
margin-right:200px; 
margin-left:200px; 
background:#fefefe;} 
.box 
{ 
    background:#fefefe; 
    border: 1px solid #C3D4DB; 
    border-top:1px; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    -moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px; 
    -webkit-box-shadow:rgba(0,0,0,0.15) 0 0 1px; 
    box-shadow:rgba(0,0,0,0.15) 0 0 1px; 
    color:#444; 
    font:normal 12px/14px Arial, Helvetica, Sans-serif; 
    margin:0 auto 30px ; 
    overflow:hidden; 
} 

<div>親クラスのコンテンツセレクタと子クラスクラスのボックスセレクタを適用しました。今は正しく適用されています。しかし、コンテンツがいくらかの量を超えるたびに、全身のコンテンツが表示されます。だから私は気にする必要があるプロパティですか？

Answer 1

overflow: hiddenを削除するか、下の例のようにheight: autoを追加して.box divを展開して、すべてのコンテンツをカバーすることができます。

.box { 
    background:#fefefe; 
    border: 1px solid #C3D4DB; 
    border-top:1px; 
    -webkit-border-radius:5px; 
     -moz-border-radius:5px; 
      border-radius:5px; 
    -webkit-box-shadow:rgba(0,0,0,0.15) 0 0 1px; 
     -moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px; 
      box-shadow:rgba(0,0,0,0.15) 0 0 1px; 
    color:#444; 
    font:normal 12px/14px Arial, Helvetica, Sans-serif; 
    margin:0 auto 30px ; 
    overflow:hidden; 
    height: auto; /* This will expand the height of the container to contain all of its contents */ 
    }