Revamped use of Angular for managing input width: The size attribute controls the width of an input, here is how I adjust the initial size of an input's width based on its content:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

Revised approach using JavaScript (10/01/2022): My original answer was focused on my experience with Angular. For a simpler solution using Vanilla JavaScript:

<input type="text" oninput="this.size = this.value.length">

Alternatively, you can attach an "input" event listener to your input element and execute code like this:

const myInput = document.querySelector('input');
myInput.addEventListener('input', this.typing);

(...)

typing(e) {
  e.target.setAttribute('size', e.target.value.length);
}

Note: Some browsers may reset the input size to default (between 150px and 250px) if the size becomes 0. In such cases, simply add +1 to value.length:

<input type="text" oninput="this.size = this.value.length + 1">

OR:

typing(e) {
  e.target.setAttribute('size', e.target.value.length + 1);
}

"Could someone clarify the specific meaning of width:auto in CSS? I find the CSS specification to be a bit ambiguous, so I may have overlooked an important section."

Interestingly, no one addressed the query regarding width:auto in the original post.

Here is the response:

When the width property is set to auto, the element can include horizontal margin, padding, and border without exceeding the container's width...

In contrast, if you set width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding, and border... This might not align with your intentions.

I created an example to illustrate the distinction:

It has been noted in a previous response that using width: auto is not effective because the width is determined by the input's size attribute, which cannot be set to "auto" or any similar value.

There are a couple of ways to work around this issue and ensure compatibility with the box model, although none are particularly remarkable to my knowledge.

One option is to set the padding within the field using percentages, ensuring that the total width adds up to 100%, like so:

input {
  width: 98%;
  padding: 1%;
}

Another approach you could try is utilizing absolute positioning, with left and right values set to 0. By implementing the following HTML:

<fieldset>
    <input type="text" />
</fieldset>

And applying this CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

This absolute positioning method will cause the input element to span the entire horizontal space of its parent fieldset, regardless of padding or margin applied to the input. However, one major drawback is that you will need to address the height of the fieldset, as it defaults to 0 unless explicitly defined. If your inputs all have the same height, this solution may be suitable; simply set the fieldset's height to match that of the input elements.

In addition to these approaches, there are JavaScript solutions available, but personally, I prefer not to use JS for basic styling purposes.

To achieve precise sizing without relying on approximations or hardcoded widths, consider using a little JavaScript solution. Particularly useful for elements like type="number", which do not support the size attribute.

The technique involves placing an invisible span with identical content next to your input element to mirror its size accurately.

Place both the input and the hidden span inside a div, style them identically, set the input width to 100%, hide the span, and position the input absolutely over it.

This method automatically sizes the container (and in turn, the input) based on the visual representation of the content within the invisible span.

https://i.sstatic.net/doIA2.png

https://codepen.io/spiffytech/pen/abwWRqo

<div id="relative-parent">
  <span id="size-calibration"></span>
  <input id="autosized-input" />
</div>

<style>
  #relative-parent {
    position: relative;
    /* Have some width if the input is empty */
    min-width: 1em;
    /* Adjust size to match the span */
    width: min-content;
  }

  #size-calibration {
    visibility: hidden;
    /* Prevent text wrapping in the span when input has multiple words or extra spaces */
    white-space: pre;
  }

  #autosized-input {
    position: absolute;
    left: 0;
    width: 100%;
  }
  
  #size-calibration, #autosized-input {
    /* Normalize styles for consistent rendering */
    font-family: "Arial";
    padding: 0;
    /* Showcasing input with custom styles */
    font-size: 24px;
  }
</style>

<script>
  function updateSize() {
    const span = document.getElementById('size-calibration');
    const input = document.getElementById('autosized-input')
    span.innerText = input.value;
  }
  document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('autosized-input');
    input.oninput = updateSize;
    
    // Initial content setup
    input.value = "I'm sized exactly right!"
    updateSize();
  })
</script>

While it may not perfectly meet your needs, one approach I suggest is to add the autowidth attribute to a container div and then adjust your input width to 100%.

In order to achieve the desired layout, one possible solution is to utilize the CSS property width:100%. To add padding to the input field as well, consider enclosing it in a container element like a label, which can then be styled with the necessary formatting and padding. Keep in mind that input fields have limited flexibility when it comes to styling.

Solution A - "reply" provided a helpful answer and link for the query. In essence, using "auto" as the value means reverting any width modifications made to an element.

Solution B - The alternative approach is to employ width: 100% instead. This will ensure that the element occupies the entire width of its parent container, such as the "form".

Implementing JQuery

$(document).on('input', '.auto-resize-input', (e) => {
     $(e.currentTarget).attr('size',e.currentTarget.value.length);
})

Having exhausted all previous methods without success, I found a solution by adjusting the width property in the style using the unit em:

tgt.style.width = `${(tgt.value.length + 1) / 2}em`

Today, using flex or grid layout provides an easier way to customize the default styles and behaviors of input elements, which typically have a default size value of 20. For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#size

This gives you two straightforward CSS options that don't require JavaScript or manually setting the width to 100% and dealing with box-sizing.

flex/flex-grow
  <form style='background:red;display:flex;'>
    <input type='text' style='background:green; flex-grow:1'>
  </form>
grid
  <form style='background:red;display:grid;'>
    <input type='text' style='background:green;'>
  </form>

How to automatically adjust the size of an input using jQuery.

Step by step guide:

$('#my_input_id').width( ($('#my_input_id').val().length) + "ch" ); 

On text input event:

$(document).on("input", '#my_input_id', function () {

    $(this).width( ($(this).val().length) + "ch" ); 
});