使用百分比和div的解决方案

虽然这个问题已经发布了将近6年，但就在几分钟前，我发现自己处于与OP相同的情况。解决方案是添加一个div作为输入字段的容器。然后在输入的宽度上添加填充所有可用空间的规则，此时我们可以根据需要更改div Package 器的大小。
前两个输入显示了没有div时的情况。最后两个输入具有相同的大小，尽管'max'值不同。

p{margin-bottom: 0;}

.wrapped{
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}
.inputWrapper{width: 30%;}

<p>Min 0, max 10</p>
<input type="number" min="0" max="10">

<p>Min 0, max 1000000</p>
<input type="number" min="0" max="1000000">

<div class="inputWrapper">
    <p>Wrapped: min 0, max 10</p>
    <input class="wrapped" type="number" min="0" max="10">

    <p>Wrapped: min 0, max 1000000</p>
    <input class="wrapped" type="number" min="0" max="1000000">
</div>

关于自动调整输入字段大小

老实说，我没有读过关于自动调整大小的文档，当我注意到这种意想不到的和不希望的行为时，我很惊讶。从下面的简单测试中，我们可以看到，只有在设置了“min”和“max”两个值时，才会发生调整大小：调整大小似乎只与max-0之间的距离成比例，而不是与max-min之间的距离成比例。注意，这是没有建议的解决方案的默认行为。

p{margin-bottom:0;}

<p>Min 0</p>
<input type="number" min="0">

<p>Min 100</p>
<input type="number" min="100">

<p>Max 0</p>
<input type="number" max="0">

<p>Max 100</p>
<input type="number" max="100">
<p> The previous input fields have the same width<p>

<p>Min 0, max 10</p>
<input type="number" min="0" max="10">

<p>Min 0, max 100</p>
<input type="number" min="0" max="100">

<p>Min 99, max 100</p>
<input type="number" min="99" max="100">

只需设置一个width作为输入。

input {
  width: 100px;
}

例如。

这个变种对我不起作用：

input {
  width: 100px;
}

但这个办法奏效了：

input {
   min-width: 100px;
}