title: Why does a content editable div fixed on given dimensions still overflow if the text is long enough?
body: <p>I was wondering how one could stop words from overflowing if they are too long for a content editable div, or at least force them to break. Given the following code:</p>
  
  <pre><code>.test{
    width: 200px;
    height: 160px;
    max-width: 200px;
    max-height: 160px;
    background: green;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  
  &lt;div class="test" contenteditable=true&gt;delete this and hold down any letter, watch as the div expands. how can i stop this?&lt;/div&gt;
  </code></pre>
  
  <p>So, thoughts? How could I force this to not change?</p>