iframe inside of a scrollable div

Question

I have an HTML5 application with iframe. on IOS there is an issue with iframe scrolling. In my application i want to scroll the content of the frame only, instead of the all document. Example page structure:

<div id="page">
    <div id="app-header">
        <h1>HEADER</h1>
    </div>
    <div id="content">
        <div id="wrapper">
            <iframe id="app-content" name="frm" src="content.html"></iframe>
        </div>
    </div>
</div>

CSS

#app-header {
    .....
    position: fixed;
    ......
}

#content {
    position:absolute;
    top: 53px;
    right:0;
    left:0;
    bottom:0;
}

#app-content {
    width: 80%;
    height: 100%;
}

The iframe's height wraps the content - ios bug - there is no scrollbars. The #wrapper wraps the iframe. When i tap wherever on the page, the whole document is been scrolled. So, i want to scroll the #content div content only, not the whole document. i added overflow:auto to the content and nothing happens. There is no scroll. When i set width:80% to the iframe and tap on the wrapper's div..the div's content is scrollable, but i when i tap on the iframe - the div's content do not scrolls. What is the problem?

10x