Extra scrollbar appears when there's no footer in a flexbox

[Mori]

Demo

https://codepen.io/mori79/pen/BaqJxMv

Issue

Remove the header element, and there’s no scrollbar; remove the footer, and an extra scrollbar appears.

Questions

1. Why does it happen, and only when you remove the footer?
2. What’s the right approach to get rid of the scrollbar?

[PaulOB]

It’s because the textarea is an inline-block element and is placed on the baseline by default (i.e. there would be room for descenders if it were text).

When you have a footer the extra space of the textarea is absorbed by the footers’ fluid height due to the flex rules. When you remove the footer there is no other flex element below the textarea and so the extra space is then evident on the window.

Set the textarea to display:block and the problem will disappear.

textarea {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  resize: none;
  display:block;
}