content-box: Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included.
When you use width: 100% on your input, you give your input content the width 100% and the border and padding go on top. That’s why it overflows. When you hover over the element in the Dev Tools, you can see this.
You can have a look at this one:
border-box: The width and height properties (and min/max properties) includes content, padding and border.