我想让一个< input type =“text”> (以下称为“文本框”)通过将其宽度设置为100％来填充父容器。这工作，直到我给文本框一个填充。然后将其添加到内容宽度和输入字段溢出。请注意，在Firefox中，这只会在将内容呈现为符合标准时发生。在怪异模式，另一个盒子模型似乎适用。
这里是一个最小的代码，以重现在所有现代浏览器的行为。
#x {
background: salmon;
padding: 1em;
}
#y,input {
background: red;
padding: 0 20px;
width: 100%;
}
<div id="x"> <div id="y">x</div> <input type="text"/> </div>
我的问题：如何获取文本框适合容器？
注意：对于< div id =“y”>，这很直接：简单地设置width：auto。但是，如果我尝试这样做的文本框，效果是不同的，文本框的默认行计数为宽度(即使我设置display：block的文本框)。
/编辑：大卫的“解决方案”当然会工作。但是，我不想修改HTML – 我特别不想添加没有语义功能的虚拟元素。这是一个典型的divitis的情况，我想不惜一切代价。这只能是最后的手段。
