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

Question

Sample code

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

header,
footer {
  background: green;
}

main {
  flex: 1;
  display: flex;
}

div {
  flex: 1;
}

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

div#one textarea {
  background: lightBlue;
}

div#two textarea {
  background: tan;
}

<header>Header</header>
<main>
  <div id="one"><textarea>Textarea 1</textarea></div>
  <div id="two"><textarea>Textarea 2</textarea></div>
</main>
<footer>Footer</footer>

Issue

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

Question

Why does it happen only when you remove the footer?

Note: I know how to get rid of the scrollbar.

Answer 1

The scrollbar appears because textarea is an inline-block element by default and indents at the bottom. There are two ways to fix the problem:

• Set parent to zero font-size or line-height (works in your case, but not recommended);
• Correct is to set display:block to the textarea itself.

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

header,
footer {
  background: green;
}

main {
  flex: 1;
  display: flex;
}

div {
  flex: 1;
  /* font-size: 0;   */
  /* line-height: 0; */
}

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

div#one textarea {
  background: lightBlue;
}

div#two textarea {
  background: tan;
}

<header>Header</header>
<main>
  <div id="one"><textarea>Textarea 1</textarea></div>
  <div id="two"><textarea>Textarea 2</textarea></div>
</main>
<!--footer>Footer</footer-->