Height automatically increases from div with contenteditable = "true"

Question

I have a div with a property contenteditable="true".

<div contenteditable="true" class="textarea"></div>

Requirements
1. The text should be centered vertically and horizontally. 2. The height should not increase automatically with increasing content inside this div, if the content grows inside the div, you need to display the scroll bar.

Here is js fiddle

if you want, use jquery too.

Answer 1

contenteditable div 2 , overflow:auto; display-table;, :

DEMO

HTML:

<div class="container1">
    <div class="container2">
        <div contenteditable="true" class="textarea"></div>
    </div>
</div>

CSS:

.container1{
    height:60px;
    width:273px; 
    overflow:auto;
    border:1px solid green;
}
.container2 {
    min-height:100%;

    display:table;
}
.textarea {
    width:273px;
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    outline: none;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    word-wrap: break-word;
    overflow:hidden;
}

Answer 2

, , div . , , / , ,

, CSS.

.scroll {
width:100px;
height:100px;
overflow:scroll;
}

HTML-

<div class="scroll">
SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE. SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.
</div>