chrome contentEditable="plaintext-only"

chromeなら可変長のtextareaが contentEditable="plaintext-only"で揃う。

  <pre class="editer size" contentEditable="plaintext-only"></pre>

日本語用にword wrapさせる。

  white-space: pre-wrap;
  word-break: break-all;

良く忘れる　outline:none

  outline:none;

chrome専用なので、chrome専用のスクロールバーを設定する。

::-webkit-scrollbar ...  

全部

@mixin editer($base:orange,$back:#111){
      color:$back;  
      background-color:$base;
      outline:none;
      padding:0.75rem 1rem;
      margin:0;
      white-space: pre-wrap;
      word-break: break-all;
      overflow:auto;
}
@mixin scrollbar($base:orange,$back:#111){
  /*scrollbar*/
  //if target only, the [contentEditable="plaintext-only"]::-webkit....
  &::-webkit-scrollbar{overflow:hidden;width:4px;background:darken($base,5%)}
  &::-webkit-scrollbar:horizontal{height:4px;}
  &::-webkit-scrollbar-button{display:none;}
  &::-webkit-scrollbar-piece{background:rgba(100,100,100,0.3);}
  &::-webkit-scrollbar-piece:start{background:rgba(100,100,100,0.3);}
  &::-webkit-scrollbar-thumb{background:$back;}
  &::-webkit-scrollbar-corner{background:rgba(100,100,100,0.3);}
}  

$base:orange;
$back:#111;

.editer{
  font-family: sans-serif;
  font-size:1rem;  
  @include editer($base,$back);
  @include scrollbar($base,$back);
}
.size{
  width:22rem;
  min-height:5rem;
  max-height:22rem;
}

  <pre class="editer size" contentEditable="plaintext-only"></pre>