How do I make sure that the width depends on the input?

Question

I am using the jQuerytokenInput plugin and I have an input element that has a fixed width . The css for the input element is as follows:

li.token-input-input-token-mac input {
  width: 100px;
  padding: 3px;
  margin: 0;
  border: none;
}

That makes a width of 100px for the input. However I want the width to be as small as possible when there is no input and increase depending on the input. How do I achieve that behavior ?

Answer 1

Try something like this.

 li.token-input-input-token-mac input {
  width: 0px;
  max-width: 100px;
  padding: 3px;
  margin: 0;
  border: none;

}

Demo Jsfiddle

.something {
  width: 100px;
  padding: 3px;
  margin: 0;
  border: none;
  background: green;

}
.nothing {
  width: 0px;
  max-width: 100px;
  padding: 3px;
  margin: 0;
  border: none;
  background: green;
}

    <div class="something">
    1234
    </div>
    <br>
    <div class="nothing">

    </div>