Overflow hidden issue with background repeating div

I'm trying to use a div to repeat a background to 100% of the height of the content inside the wrapper.

I'm using overflow: hidden to do this, but this (unsurprisingly) cuts off content at a point dependent on the user's screen resolution.

Removing the overflow:hidden line means the background won't repeat at all and the #wrapper div doesn't assume the full height of the content.

You can see my code and a preview here - http://jsbin.com/ikuba4/2 - if anyone has any pointers that would be great!

EDIT: To clarify, the issue is that I need my #wrapper di开发者_如何转开发v (which contains the background image slice repeating vertically) should dynamically extend its height to the height of the #inner_wrapper div - removing overflow:hidden results in the #wrapper div not extending its height at all, while using overflow:hidden extends the height to a point but then content gets cut off.

On #wrapper:

• Remove height: 100%.
• Remove overflow: hidden.

On #inner_wrapper:

• Remove height: 100%.
• Add overflow: hidden.

Testing with Firefox/Firebug, those steps sort it out.

Here is a fixed jsBin which is doing the equivalent of those steps.

Edit:
As @Marnix pointed out in his answer, you should also remove height: 100% from #outer_container - I don't think there's any need for it to be there.

A little different which works as well:

#outer_container

• remove height: 100%

#wrapper

• remove height: 100%

#inner_wrapper

• remove height:100%
• add overflow:auto