У многих элементов кроме стилей устанавливаемых пользователем, есть еще стили устанавливаемые браузером по умолчанию.
Когда вы пишете для textarea
width: 100%;
это вы устанавливаете ширину клиентской части в 100% от родительского div. Но браузер дополнительно приписывает для textarea
padding:2px;
border: 1px solid black;
Поэтому общая ширина оказывается больше.
Надо либо скинуть стили браузера, либо устанавливать размеры всей textarea, а не только клиентской части
Кроме того стиль по умолчанию для textarea - inline-block. Из-за этого браузер может по своему выравнивать базовую линию первой строки textarea со строкой родительского элемента. Может чуть приподнять элемент или опустить.
Проще установить для нее display: block
<!DOCTYPE html>
<div class="chat">
<textarea class="chat__text-area"></textarea>
</div>
<style>
.chat {
position: relative;
width: 40%;
height: 40%;
background: black;
}
.chat__text-area {
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
background: green;
}
</style>