Indpu with width: 100% inside div with relative position and 40px width has 100px

Question

The basic idea is something like this: I have a div with a position of relative and a given width (40 pixels) and an input with width:100%. The problem is that instead of 40px when entering, its width is 100px.

As you can see in the last image, the input seems to be incomplete.

I can’t understand why here are some prints with structure:

Answer 1

Try explicitly entering 40 pixels wide input, not just its parent. Also give it a mapping: block;

.cka_dialog_ui_input_text input {
  display: block;/* fixes some errors */
  width: 36px;/* 40 - 2x2px border*/
  padding: 0;/* just for testing*/
}