How to force free CSS resize on input element when its width is specified?

Question

I have simple problem - text input element which has specified 2 CSS attributes, see code below:

Answer 1

Here is an example of using div with flexbox & contenteditable=true instead of input. Only CSS + HTML. I found it useful if no tag 'form' required.

#flex {
  display: flex;
  display: -webkit-flex;
  line-height: 30px;
}
#inner {
    padding: 0 20px;
    min-width: 100px;
    height:30px;
    line-height:30px;
    outline:none;
    background-color: #dfd4d7;
}

Type some text here: