输入溢出容器

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; 
}