出现滚动条是因为textarea默认是一个inline-block元素，并且在底部缩进。有两种方法可以解决此问题：

• 将parent设置为零 font-size 或 line-height（适用于您的情况，但不推荐）;
• 正确的做法是将display:block设置为文本区域本身。

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-->