<div class="container">
<div class="yellow"></div>
<div contenteditable="true"></div>
</div>.container {
display: inline-flex;
width: 200px;
height: 400px;
flex-direction: column;
border: 10px solid red;
}
.yellow {
background: yellow;
flex-grow: 1;
}
div[contenteditable] {
background: #47f;
max-height: 300px;
overflow-y: auto;
}-= означает вычесть и присвоить результат. Почему вычитаем -2, а не прибавляем 2? Потому что innerHTML - это строка, а сложение строк и чисел в javascript'е имеет результатом строку, т.е. вместо 3 было бы 12, вместо 4 было бы 22, вместо 5 было бы 32. А вот вычитание из строки преобразует строку в число, так что получаем нужный результат.this.innerHTML *= 2.
.overlay со своим opacity виноват. В примере, на который вы дали ссылку, вместо opacity используется background-color c прозрачностью - исправил свой пример соответствующим образом.