CSSでボックスから文字がはみ出る問題について

Question

以下のような構造のhtmlとcssを書いてみたのですが、文字がはみ出ます。

<div class="outer">
	<div class="box">
		</div>
<div class="textarea">
あああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</div>
</div>

div.outer{border:4px solid green;
height:500px;width:500px;
margin-bottom:100px;}
div.box{height:200px;background-color:blue;}
div.textarea{border:10px solid red;font-size:30px;
	height:100px;
}

overflow hiddenを指定すれば切り取られはしますが、指定しなくても文字数がオーバーすれば切り取られるはずです。以下では切り取られると認識していたのですが、以下でもはみ出ます。

<div style="width:20px;height:20px;font-size:20px;border:10px solid orange;">
			あああああああああ
			あああああああああ
			あああああああああ
			</div>

何故このような現象が起こるのでしょうか？
またどのように改善すれば良いでしょうか？

Answer 1

指定しなくても文字数がオーバーすれば切り取られるはずです。

どうしてそう考えたのでしょうか？

overflowに何も指定しない場合、デフォルトはvisible、つまりはみ出す動作です（MDN）。

Comments

[maisumakun]

overflow: hidden;を指定する、というのが適切です。

[blendegg]

以前にそのような動作だったことがありましたが、記憶違いだったかもしれません。
textareaにheightを指定せず文字数が溢れた場合、textareaがouterからはみ出てしまうのですが、textareaをouterの残りの領域にフィットさせる方法というのはないでしょうか？object-fit:fill;ではそのような動作になりません

[maisumakun]

outerにoverflow:hiddenをかける、で良さそうな気もします。

https://jsfiddle.net/g8uqe1Lf/

[blendegg]

そうします。なんだか気持ち悪さがあったので、できればフィットさせたかったですが
ありがとうございました。