HTML
<div class="upper">
<div></div>
</div>
<div class="lower">
<div class="hid">
<div ></div>
</div>
</div>
CSS
.upper {
background:black;
height:80px;
}
.upper div {
width: 100px;
height: 50px;
background-color: yellow;
float: left;
}
.lower {
margin-top:-60px;
}
.lower > div {
width: 100%;
background: green;
}
.lower > div.hid{overflow:hidden}
.lower>div>div {
width:100px;
height:100px;
background:red
}
The displays of above HTML on Firefox and Chrome are different, I know it has something to do with “overflow:hidden”, but I don’t know what exactly is causing this issue. Is there any elaborate document about this different behavior among the two major browsers?
And, ‘overflow:hidden’ seems to affect the document flow, what is the theory behind this behavior?
Source: cross-browser
