expanding div

HTML

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

CSS

#main {
  width: 700px;
  box-shadow: inset 0 0 0 1px #000;
  padding: 10px;
}

#child1 {
  width: 150px;
}

#child2 {
  width: 100%;
}

#child3 {
  width: 100%;
  box-shadow: inset 0 0 0 1px #c00;
  padding: 40px;
}

#child3:hover {
  width: 680px;
}