html - Make <input> (and enclosing <div>) automatically as wide as content -

if have

<div><input></input></div> 

how can make width of both input , containing div automatically wide text value presented. in particular, want box grow , shrink when user edits input.

can in pure css? have listen events , update style? how? (note: font in case mono-spaced, makes easier, although i'm interested in general solution).

you can add input event listener, run whenever value changes.

and in listener, update input's size attribute.

if font monospaced, should work desired.

document.queryselector('input').addeventlistener('input', function() {    this.size = this.value.length || 1;  });

input { font-family: monospace; }

<input size="1" />