Why does the input field go beyond the bounds of the container?

Question

css

I'm writing here an adaptive web interface for the program, and BAM, a bunch of shit comes from where you didn't expect it! .text_area ( I know that text_area is a different type of input tag, but I don't give a shit ), decided to crawl outside of its parent... I tried all the Internet jokes, but nothing works. Help heal my hemorrhoids!!!

Here is the code:

Answer 1

box-sizing: border-box

Answer 2

This is because of the padding property. You specified that the text_area's width should be 100% of the parent's width, but that's just the width of the text_area's content, and there's also padding that makes your block even larger. If you look at the box model of an element in the developer panel, it will immediately become clear.