title: Input type=text to fill parent container
body: <p>I'm trying to let an <code>&lt;input type="text"&gt;</code> (henceforth referred to as “textbox”) fill a parent container by settings its <code>width</code> to <code>100%</code>. This works until I give the textbox a padding. This is then added to the content width and the input field overflows. Notice that in Firefox this only happens when rendering the content as standards compliant. In quirks mode, another box model seems to apply.</p>
  
  <p>Here's a minimal code to reproduce the behaviour in all modern browsers.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#x {
    background: salmon;
    padding: 1em;
  }
  
  #y, input {
    background: red;
    padding: 0 20px;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="x"&gt;
    &lt;div id="y"&gt;x&lt;/div&gt;
    &lt;input type="text"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My question: <strong>How do I get the textbox to fit the container?</strong></p>
  
  <p><em>Notice</em>: for the <code>&lt;div id="y"&gt;</code>, this is straightforward: simply set <code>width: auto</code>. However, if I try to do this for the textbox, the effect is different and the textbox takes its default row count as width (even if I set <code>display: block</code> for the textbox).</p>
  
  <p>EDIT: David's solution would of course work. However, I do not want to modify the HTML – I do especially not want to add dummy elements with no semantic functionality. This is a typical case of <a href="http://en.wiktionary.org/wiki/Citations:divitis" rel="nofollow noreferrer">divitis</a> that I want to avoid at all cost. This can only be a last-resort hack.</p>