输入溢出容器

Question

我遇到一个问题，即将width: 100%设置为容器内的输入扩展超过容器容量。这个问题似乎不会发生在按钮上：

<form>    
  <input type="text" class="input"></input>    
  <button>Button</button>
</form>

CSS：

form {
  max-width: 200px;  
  border: 1px solid #eee;   
}

.input, button {
  width: 100%;
}

在此示例中，按钮正确填充容器，但输入进一步扩展：

我该如何解决这个问题？

我创建了一个codepen：http://codepen.io/jviotti/pen/qfFmH

Answer 1

您可以修复此添加

.input, button {
  width: 100%;
  box-sizing: border-box; /* add this */
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
}