title: Why doesn't the <input> element respect min-width?
body: <p><a href="http://jsbin.com/nuzazefuwi/1/edit?html,css,output" rel="noreferrer">http://jsbin.com/nuzazefuwi/1/edit?html,css,output</a></p>
  
  <p>In the link above the textbox should have only 10px instead it has a width of <code>152px</code>.</p>
  
  <p>This is the code:</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>.input {
    width: 100%;
    box-sizing: border-box;
  }
  
  .cont {
    padding: 2px;
  }
  
  .main {
    position: absolute;
    border: 1px solid black;
    min-width: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='main'&gt;
    &lt;div class='cont'&gt;
      &lt;input type="text" class='input' /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;br/&gt; the textbox should have 10px</code></pre>
  </div>
  </div>
  </p>
  
  <p>It looks like the input starts to get the correct width only after <code>.main</code> <code>min-width</code> is greater than 156px.</p>