Поему поле для ввода выходит за границы контейнера?

Question

[David King]

Пишу тут адаптивный вебинтерфейс для программы, и БАЦ, шмат говна прилетает оттуда, откуда ты этого неожидал! .text_area ( я знаю что text_area это другой тип input тега, но мне насрать ), решил выползти за границы своего родителя... Я попробовал все интернет приколы, но нечего не работает. Помогите излечить мой геморой!!!

Вот код:

Answer 1

[Ankhena]

box-sizing: border-box

Comments

[Андрей Шевкалюк]

Да, лучше так сделать

Answer 2

[Андрей Шевкалюк]

Это из-за свойства padding. Вы указали, что ширина text_area должна равняться 100% ширины родителя, но это только ширина содержимого text_area, а ведь есть еще padding, который дополнительно увеличивает размеры вашего блока. Если посмотрите на блочную модель элемента в панели разработчика, сразу станет видно.

Comments

[Андрей Шевкалюк]

Либо сделайте
width: calc(100% - 4vw);
либо box-sizing, как предложили ниже