【CSS】input宽度根据内容自适应

目标：纯css实现以下功能

input 设置width:min-content | max-content；//无效

∵ 文本输入框通常会被浏览器渲染为具有固定宽度的控件。

解决方法：设置input的宽高都为100%，让它随着父元素的宽高改变。
父元素如何改变呢，给个看不见的标签（opacity:0）撑起来，这个看不见的标签的内容就是输入框的内容。

/**自适应宽度的输入框**/
.input-adaptive-width{
  display: inline-block;
  min-width: 20px;
  max-width: 200px;
  white-space: nowrap;
  position: relative;
}
.input-adaptive-width span {
  display: inline-block;
  height: 100%;
  background: inherit;/**继承父级**/
  padding: 0;
  white-space: nowrap;
  opacity: 0;
}
.input-adaptive-width input {
  display: inline-block;
  height: 100%;
  width: 100%;
  background: inherit;/**继承父级**/
  position: absolute;left: 0;top:0;
  padding: 0;
  opacity: 1;
  min-width: 20px;
  border: none;
}
.input-adaptive-width input:focus{
  outline: 0;
}

<span class="input-adaptive-width">
    <span>{{vm.newTag}}</span>
    <input name="newTag" type="text" maxlength="20" ng-model="vm.newTag">
</span>