Expanding div on hover relative to a parent div with jQuery

I have a parent div with a few children:

<div id="main">
   <div id="child1">
      <div id="child2">
         <div id="child3">content</div>
      </div>
   </div>
</div>

The CSS is:

#main {width: 700px;}
#child1 {width: 150px;}
#child2 {width: 100%;}
#child3 {width: 100%;}

On hover, I want #child3 to expand to 90% width of #main, not be constrained to the 150px of its parent.

I tried giving #child3 a fixed width in px, but that caused a lot of issues with content spilling outside the #main div. I want to keep the expanded content of #child3 inside #main at all times.

Can this be done with JavaScript or jQuery? Please advise. Thanks!

JSFiddle here.