The overflow:hidden
definition will hide anything inside that element that extends beyond its bounds.
Depending on your specific application, you may be able to use a structure like this:
.container {
position: fixed;
top: 30px;
left: 50px;
height: 30px;
width: 300px;
background: red;
}
.outer {
overflow: hidden;
}
.inner {
position: absolute;
}
.show-up {
width: 100px;
height: 300px;
background: green;
position: relative;
margin-left: 20px;
}
<div class="container">
<div class="outer">
<div class="inner"></div>
</div>
<div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>
View on JSFiddle