html - Overflow hidden with parent div in absolute position -

i have specific requirement is, parent div absolute:position , child div absolute position , in parent div have overflow:hidden width of child div hidden not working, know parent div have position:relative, per current structure of code cannot change parent div position absolute relative, wanted know if there way handle this?

here jsfiddle of example, want light red box hidden under parent div child div within parent.

here code

.wrapper {    position: absolute;    left: 100px;    top: 100px;    width: 400px;    height: 350px;    background: #666666;    padding: 10px;  }  .wrapper-inner {    position: absolute;    width: 450px;    height: 380px;    background: #fecccc;  }

<div class="wrapper">    <div class="wrapper-inner">      content goes here    </div>  </div>

check code, per requirement:

.wrapper {   position: absolute;   left: 100px;   top: 100px;   width: 400px;   height: 350px;   background: #666666;   padding: 10px;   overflow: hidden; }