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 :)?