Absolute div tag height is not aligned to parent div

Question

I am creating an editor which should have a line-number bar(gutter) at left side. I set a div whose height is 100% and parent div overflow : auto.

I assume here that,If content exceeds the given height, editor-body should get a scroll bar and gutter bar height should be(increased to) as much as body height.

But it is not happening... Here fiddle

 <div class="wrapper">
      <div class="body">
         <div class="gutter"></div>
         <div class="content" contenteditable=true>
            Enter some thing here upto getting scroll..
             more data..<br/>
             more data..<br/>
             more data..<br/>
              more data..<br/>
              more data..<br/>
              more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/>
         </div>
      </div>
   </div>

<style type="text/css">
   .wrapper{
     width:400px;
     height:250px;
     border:1px solid #757575;
   }
   .body{
     width:100%;
     height:100%;
     overflow:auto;
     position:relative;
     padding-left:22px;
   }
   .gutter{   
     position:absolute;
     left:0px;
     width:20px;
     height:100%;
     background:#e5e5e5;
     border-right:1px solid #757575;
  }
  .content{
    width:380px;;
    height:100%;
  }
</style>

Answer 1

If you set relative + overflow + height:100%; , the absolute element will not be taller than those 100% height if you use height or coordonate to size it.

You should get the .wrapper to scroll in order to see the gutter accept coordinates. http://jsfiddle.net/d9pDh/2/

Answer 2

Put the .gutter as a child of the .content:

http://jsfiddle.net/d9pDh/6/

<div class="content" contenteditable=true>
    <div class="gutter"></div>
    Enter some thing here upto getting scroll..
... etc

CSS

.gutter{   
    position:absolute;
    right:100%;
    width:20px;
    min-height:100%;
    background:#e5e5e5;
    border-right:1px solid #757575;
}
.content{
    width:380px;
    min-height:100%;
    position:relative;
}