min-content y max-content no parecen preocuparse por el valor del elemento de entrada:
input { border: 1px solid black; width: min-content; } <input type="text">CSS ignora por completo el valor de la entrada al calcular el contenido mínimo, solo usa un ancho predeterminado que nunca cambia sin importar el contenido:
¿Cómo puedo hacer que el CSS tenga en cuenta el ancho del "contenido" (valor):
Sin usar javascript para establecer width , ancho min-width max-width
No es posible sin JavaScript.
Debe establecer mediante programación el ancho de la entrada a la longitud de su valor. Esto se puede simplificar con la unidad ch .
document.querySelector('input').addEventListener('input', function() { this.style.width = this.value.length + 'ch' }) <input type="text">