ボックス
section.box-products {
すべてを持っています
section.box-products ul li.item {
その中の要素ですが、<li>カウントが増加してもボックス製品のdivの高さが増加していません。
なんで？
コード：
<section class="box-products">
<div class="large-12 columns">
<h2>
Noteworthy
</h2>
</div>
<div class="large-12 columns">
<ul class="large-block-grid-8">
<li class="item">
<img src="assets/images/item/1.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/2.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/3.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/4.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/5.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/6.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/7.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/8.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/9.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/10.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/11.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/12.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/13.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/14.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/15.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/16.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/17.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/18.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/19.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/20.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
</ul>
</div>
そしてCSS：
section.box-製品 {
margin-top: 24px;
padding-bottom: 20px;
/*border: 1px solid red;*/
min-height: 220px;
background-color: #fff;
border-bottom: solid 3px #8A8780;
}
section.box-製品 h2 {
font-size: 1.3em;
font-weight: 400;
}
section.box-products ul li.item {
width: 120px;
height: 140px;
margin-top: 12px;
margin-bottom: 12px;
/*border: 1px solid red;*/
}
アップデート：
オーバーフローの追加: 非表示; 問題を修正しました！
ありがとうございました！