Even if you specify max-width: 100%; for example, in the input tag, it may still extend beyond the container. This may be caused by the size attribute being specified on the input tag.
The size attribute specifies the apparent width of the input tag. If this value is specified, space is reserved for that size. Therefore, if size="60 “, for example, is specified, the specified width will be allocated and may extend beyond the container.
To solve this problem, the size attribute should be empty. Specifically, use size=" “. This will cause the size attribute to be treated as if it were not specified, and styles such as max-width: 100%; will be applied.
<input size="" />