hidden + visible = auto

The big div has a class that gives hidden overflow. This is overriden with CSS on the ID setting the overflow-y to visble. Result is: scrollbars!

HTML

<div id="big" class="hider">
    <div id="long"></div>
</div>

CSS

#big {
    width: 200px;
    height: 100px;
    background-color: red;
}
#long {
    width: 50px;
    height:150px;
    border: 1px solid blue;
    background-color: lightblue;
}
/* The outer div gets a default overflow hidden */
.hider {
    overflow: hidden;
}
/* this should override the .hider CSS, but instead you get a scrollbar */
div#big {
    overflow-y: visible;
}