为什么当行很长时，创建 <textarea> `white-space: pre` 会阻止滚动条到达底部

Question

如果我用

white-space: pre

设置文本区域的样式，那么只要有长行（即通常会换行的行），滚动条就无法再到达底部。

textarea {
  width: 400px;
  height: 200px;
  font: 20px monospace;
  resize: none;
}

.ws-normal {
  white-space: normal;
}

.ws-pre {
  white-space: pre;
}

<h2>Background</h2>
<p>
There are two textareas below. The first has been styled with `white-space: normal`. The second has been styled with `white-space: pre`.
</p>
<p>
Try scrolling to the bottom of each. Observe whether the scroll bar can reach the bottom or not. In my browser (Chrome), first textarea's scroll bar can reach the bottom, but the second textarea's scroll bar cannot.
</p>

<h2>1. white-space: normal</h2>
<textarea class="ws-normal">foo
foo
foo
THIS LINE IS SUPER LONG FOR DEMONSTRATIVE PURPOSES QWERTYUIOPASDFGHJKLZXCVBNM
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo</textarea>

<hr/>

<h2>2. white-space: pre</h2>
<textarea class="ws-pre">foo
foo
foo
THIS LINE IS SUPER LONG FOR DEMONSTRATIVE PURPOSES QWERTYUIOPASDFGHJKLZXCVBNM
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo</textarea>

注意：如果很难查看此演示，我在 JSFiddle here 上发布了一个相同的演示。

问题

为什么滚动条无法到达底部？这种行为符合 CSS 规范吗？或者这是浏览器特定的错误？

Answer 1

正如@Guy Incognito在评论中善意指出的那样：

那只是因为现在有水平和垂直滚动条。如果垂直滚动条变低，它将位于水平滚动条的顶部。