How to hide overflow "at the top"? - html

Question

Is there a way to hide the overflow of a div "at the top" rather than "at the bottom"?
This jsFiddle illustrates what I mean. The enclosing div has overflow-y:hidden, but this hides the lower part of its content. I want to hide the upper part of it.
The obligatory source code (verbatim from the jsFiddle):
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
#centered{
margin:20px auto 0;
overflow-y:hidden;
height:150px;
outline:5px solid green;
}
#centered,
#top,
#bottom{width:150px;}
#top {height:120px;background-color:red;}
#bottom{height:150px;background-color:#555;}
#top,#bottom{
color:white;
text-align:center;
padding:0 10px;
}
#top{padding-top:50px;}
#bottom{padding-top:60px;}
<div id="centered">
<div id="top">
this div should be "overflowed away"
<em>at the top!</em>
</div>
<div id="bottom">
this content should show
</div>
</div>

Answer 1

See this FIDDLE, you need to wrap the content in an absolute positioned DIV with bottom set to 0, whilst the parent container is given a position of relative
HTML
<div id="centered">
<div id='content'>
<div id="top">this div should be "overflowed away" <em>at the top!</em>
</div>
<div id="bottom">this content should show</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
margin:0;
padding:0;
}
#centered {
margin:20px auto;
overflow-y:hidden;
height:150px;
border:5px solid green;
width:150px;
position:relative;
}
#content {
bottom:0px;
position:absolute;
}
#top {
min-height:120px;
background-color:red;
padding-top:50px;
}
#bottom {
background-color:#555;
padding:60px 10px 0 0;
}
#top, #bottom {
color:white;
text-align:center;
}