How to make the Editable Div fixed size, when there is a large amount of content, the scroll bar automatically appears

Method 1

<Style type = "text/CSS">
# Composition {
Border-Right: # fff 2px inset;
Padding-Right: 5px;
Border-top: # fff 2px inset;
Padding-left: 5px;
Color: #000000;
Background: white;
Padding-bottom: 5px;
Overflow: auto;
Border-left: # fff 2px inset;
Padding-top: 5px;
Border-bottom: # fff 2px inset;
}
</Style>
<Div id = "Composition" name = "Composition" style = "width: 100%; Height: 400px"> Online Editor </div>

Editable

<Style type = "text/CSS">
# Composition {
Border-Right: # fff 2px inset;
Padding-Right: 5px;
Border-top: # fff 2px inset;
Padding-left: 5px;
Color: #000000;
Background: white;
Padding-bottom: 5px;
Overflow: auto;
Border-left: # fff 2px inset;
Padding-top: 5px;
Border-bottom: # fff 2px inset;
}
</Style>
<Div id = "Composition" contenteditable = "true" name = "Composition" style = "width: 100%; Height: 400px"> Online Editor </div>

Method 2

<Div id = "div1" style = "width: 100px; Height: 100px; overflow: auto;">
<PRE>
Asdfasdfasdf
ASDF
ASD
ADFs
As
DF
ASDF
Asdfasd
</PRE>
</Div>