Flexbox 2x2 grid - input inside overflows the flex container - css

Question

I want to have a flexbox 2x2 grid that contain a random number of elements (odd or even). I've achieved to create this flexbox without any problems.
When I added my content: input fields with width 100% I noticed that those are bigger then their flex container which seems odd. In the example this is easy to spot on the last red box.
How can I make the input fields be 100% of the flex container?
.flex-grid {
display: flex;
flex-wrap: wrap;
height: 500px;
}
.grid-item {
flex: 1 1 50%;
background: #F90;
border-top: solid 1px #000;
}
.grid-item:nth-child(odd) {
background: #F00;
flex: 0 0 50%;
}
input {
width: 100%;
}
<div class="flex-grid">
<div class="grid-item">
<input type="text" value="email">
</div>
<div class="grid-item">
<input type="text" value="email">
</div>
<div class="grid-item">
<input type="text" value="email">
</div>
</div>
Fiddle: https://jsfiddle.net/x3pyenkL/

Answer 1

From Documentation:
The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.
Set box-sizing: border-box for <input> elements.
input {
box-sizing: border-box;
width: 100%;
}
Or better to add for all elements of your page for consistency.
* {
box-sizing: border-box;
}
.flex-grid {
display: flex;
flex-wrap: wrap;
height: 500px;
}
.grid-item {
flex: 1 1 50%;
background: #F90;
border-top: solid 1px #000;
}
.grid-item:nth-child(odd) {
background: #F00;
flex: 0 0 50%;
}
input {
box-sizing: border-box;
width: 100%;
}
<div class="flex-grid">
<div class="grid-item">
<input type="text" value="email">
</div>
<div class="grid-item">
<input type="text" value="email">
</div>
<div class="grid-item">
<input type="text" value="email">
</div>
</div>