溢出隐藏和绝对位置

在下面的标记中，我想要设置inner外部的位置，.wrap以获得以下结果：

但是，问题在于.wraphasoverflow: hidden会自动生成并且无法更改。还有其他方法可以在不更改.wrap的CSS的情况下达到相同的结果吗？

HTML：

<div class="wrap">
    <div class="box">
        <div class="inner"></div>
    </div>
</div>

CSS：

.wrap{
    overflow: hidden; /* problem */
    width: 200px;
    height: 200px;
    background: yellow;
    position: relative;   
}

.inner{
    width: 10px;
    height: 100%;
    position: absolute;
    right: -50px;
    top: 0;
    background: green;
    z-index: 3;        
}

JSFiddle： http : //jsfiddle.net/bAGTg/