height is increasing automatically of div with contenteditable="true"

Question

I've div with property contenteditable="true".

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

Requirements
1. Text should be center aligned vertically and horizontally.
2. Height should not increase automatically with increase in content inside that div, if content increases inside div, scrollbar need to display.

Here is js Fiddle

if you want, use jquery too.

Answer 1

You can wrap the contenteditable div in 2 containers, one for the width and height with overflow:auto; and one for the display-table; property so the text is horzontaly centered :

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;
}