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

Question

The main idea is kind of like this I have a div with position relative and set width (40px) and an input with width:100%. The problem is that instead of 40px with on input its width is 100px.

As you can see in the last image the input appears to be unfinished.

I can't figure it why so here are some prints with the structure:

Answer 1

Try to explicitely give the input a width of 40px, not just to its parent element. Also give it a display: block;

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