html样式超出出现滚动条,CSS 设置的高度超出屏幕高度为什么没出现滚动条？

//重复.waterBox2里的内容。

.waterBox1{

position: relative;

border: solid 3px black;

border-radius:3px;

width:96%;

height:auto;}

.waterBox1:after{

content: "";

clear: both;

display: block;}

.waterBox2{

padding: 20px 0 0 40px;

float: left;}

.waterBox3{

padding: 10px;

border: solid white 1px;

box-shadow: 0 0 5px;

background: white;

border-radius: 4px;}

.waterBox3 > img{width: 185px;height: auto;}

我重复在.waterBox1内插入.waterBox2(含其所有后代元素)直到溢出

屏幕，虽然屏幕出现了滚动条，但是只是卷起了很少一部分内容，。所以看不到

下面的内容(图片)。当我给.waterBox1加个overflow:scroll属性

之后可以看到，但是.waterBox1并没有滚动条出现只是有个，

滚动条的样式出现，内容是平铺下来的，并没有被卷起。发现Body盒子的之前滚动条

卷起的内容比以前多了很多。求解为什么没有在.waterBox1盒子内卷起？为什么不

设置.waterBox1的overflow:scroll属性会看不到下面的内容？按理说超出游览器

高度会出现滚动条往下卷啊，然而之前它出现了却没往下卷很多，只是卷了一点，这根本

不足够让我看到下面的内容

-------分割线---

忘了说，我给那个最大的容器设置了scroll属性(最大那个容器是一个DIV是Body的子元素)