По умолчанию элемент <textarea> отображается с рамкой вокруг него.Проблема в том, что когда вы устанавливаете свойство width для элемента, вы устанавливаете только ширину содержимого, а не общую ширину.Общая ширина элемента (width + border + padding + margin), поэтому, когда вы устанавливаете width для <textarea> равным 100%, он устанавливает width содержимого в 300px, но общую ширинуявляется то, что 300px плюс границы по умолчанию, что заставляет его превышать ширину 300px <div>.
. Вы можете разместить эти границы в <div>, используя отступы / поля, но лучшее решение будетбыть установленным для свойства box-sizing в <textarea> равным border-box, чтобы свойство width определяло общую ширину всего, включая границу элемента.
Вам нужно будет немного изучить это свойство, поскольку оно объявлено по-разному во всех браузерах (например, -moz-box-sizing, -ms-box-sizing, -webkit-box-sizing и т. Д.). Вот страница QuirksMode на box-sizing, которую вы можете просмотреть.
Исправление box-sizing работает для Firefox, но я не проверял его в других браузерах.Вполне возможно, что некоторые из них, особенно в режиме «Причуды / унаследование», также могут применять поле к элементу.Если это так, то все, что вам нужно сделать, это удалить поля с помощью CSS (AFAIK, широко не поддерживаемая опция для box-sizing, которая распространяется на поля - только для контента, отступов и границ).
Я бы предложил определиться с этим исправлением, и удалить только левые / правые поля (т. Е. margin-left: 0; margin-right: 0;), а не удалять поля полностью (т. Е. margin: 0;), чтобы сохранить любые верхние / нижние поля, если онисуществуют (и если вы хотите сохранить их).Я знаю, что Firefox применяет отступ в 1 пиксель к верху / низу, и другие браузеры тоже могут.