title: Prevent auto-scroll of contenteditable
body: <p>I have element over image that is editable. And when writing text inside it as soon as cursor leaves wrapper it's scrolled and placed in view. How to fix it (if possible using only CSS, prefer not to change structure). </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
    position: relative;
    border: 1px solid red;
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .wrap .item {
    position: absolute;
    white-space: nowrap;
    left: 70%;
    top: 50%;
    background: rgba(20, 20, 20, .5);
    color: white;
    padding: 10px 15px;
    display: inline-block;
  }
  
  img {
    width: 100%;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="wrap"&gt;
    &lt;img src="http://placehold.it/350x150"/&gt;
    &lt;div class="item" contenteditable="true"&gt;Write HERE to get very long text and see scroll&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>