HTML <Select> width not equal to other controls - html

Question

I have a Select field that I want to take up as much space as every other field in my form, and they go down vertically.
When I set the width of my controls to 70% all controls assume this width, except Select.
HTML
<div>
<ul class="flex-container">
<li class="flex-item">
<input type="date" id="dateField" />
</li>
<li class="flex-item">
<select type="text" id="areaField">
<option value=""> Choose</option>
<option value=" 1"> 1</option>
<option value=" 2"> 2</option>
<option value=" 3"> 3</option>
<option value=" 4"> 4</option>
</select>
</li>
</ul>
</div>
CSS:
#dateField, #areaField{
width: 70%;
}
.flex-container {
list-style: none;
}
You can see a JSFiddle Demo of what I mean here.
Does anyone know what to do about that :)?

Answer 1

You'll want to invoke the box-sizing property and set it to border-box.
There are some good discussions about this issue on a previous thread. The suggested answer of content-box doesn't work unless you have a border surrounding the input/select, so border-box will work better for you in this situation.
#dateField, #areaField{
width: 70%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.flex-container {
list-style: none;
}
<div>
<ul class="flex-container">
<li class="flex-item">
<input type="date" id="dateField" />
</li>
<li class="flex-item">
<select type="text" id="areaField">
<option value=""> Choose</option>
<option value=" 1">1</option>
<option value=" 2">2</option>
<option value=" 3">3</option>
<option value=" 4">4</option>
</select>
</li>
</ul>
</div>