Make CSS pseudoelement :after same height as parent div

Question

I have a parent div has to have a blue background on the margin of it. I have decided to use the :before psedoeelement to do that. I have set the position to be absolute and height to 100%. Now when I set the height of this to be 100%, I believe the the before is taking height of the page and not its div plus it almost seems as if the this psedoelement :before is a div that has position of fixed. Here is some code

<div contenteditable="true" class="editableDiv" style="heigth: 100px;">
<p><b>test </b><p>

  </p>
</div>

CSS

.editableDiv{
  background-color: #DEDEDE;

  min-height: 100px;
  max-height: 400px;
  overflow:scroll;
}
.editableDiv p{
    padding: 0px 0px 0px 43px;
}

.editableDiv:before{
 background-color:blue; 
 content: " ";
 position:absolute; 
 float:left;
 height: 100%;
 width: 40px;
 display:block;
}

How can I make it so the blue margin is scrolls with the div automatically adjusts height according to the height? Here this is the JSFiddle for the problem

Edit 1

The problem with adding just a position:relative to editabeDiv is that it works for as long as
don't make the div scroll but as soon as there is a scroll there is no longer a margin from that point onwards. You can try hitting enter for a while on jsfiddle to recreat this.

Answer 1

Your code works as expected: the blue pseudo-element covers all the editable element vertically.

The problem is that the contents of the editable div overflow it, and it seems you want the blue element to be as tall as the contents, not the editable element.

To achieve that, you should add another element.

.editableDiv-wrapper {
  max-height: 400px;
  overflow: scroll;
}
.editableDiv {
  background-color: #DEDEDE;
  position: relative;
  min-height: 100px;
  overflow: hidden; /* Prevent margin collapse */
}
.editableDiv p {
  padding: 0px 0px 0px 43px;
}
.editableDiv:before {
  content: " ";
  position: absolute;
  height: 100%;
  width: 40px;
  background-color: blue;
}

<div class="editableDiv-wrapper">
  <div contenteditable="true" class="editableDiv" style="heigth: 100px;">
    <p><b>test</b></p>
  </div>
</div>
<hr />
<div class="editableDiv-wrapper">
  <div contenteditable="true" class="editableDiv" style="heigth: 100px;">
    <p><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b></p>
  </div>
</div>