輸入溢出容器

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