How to make select input shrink when browser is resized? - html

Question

I have a very simple form. The usual: a label and an input. The goal is to create a simple and responsive form. Everything works ok, except when the form contains a select input that is too large. For some reason, the select input does not shrink when the browser is resized. The other inputs (input, textarea) do shrink as the browser is resized.
I've tried using max-width: 100% on the select input, as other people suggested here, with no success.
I've created a jsfiddle that explains everything:
https://jsfiddle.net/ampr41po/3/
Here's the HTML
<div class="form-main">
<form action method>
<div class="controlUnit">
<div class="label">
<label for="firstname">First name</label>
</div>
<div class="control">
<input id="firstname" name="firstname" type="text" autofocus value="">
</div>
</div>
<div class="controlUnit">
<div class="label">
<label for="name">Name</label>
</div>
<div class="control">
<select id="name" name="name">
<option value="1">Name goes here</option>
<option value="2">Name</option>
<option value="3">This is a very very very very very long name. The name is mwpekng erter erter erter 4et erter 4ertye rwe 45y 43 rt rty rty rt rty rty </option>
<option value="4">Another name</option>
</select>
<span class="icon-item"></span>
<span class="icon-item"></span>
<span class="icon-item"></span>
</div>
</div>
</form>
</div>
CSS:
* {
box-sizing: border-box;
}
.form-main {
background-color: red;
max-width: 500px;
margin: 0 auto;
padding: 20px 15px;
}
.controlUnit {
display: flex;
}
.controlUnit .label {
flex: 0 0 100px;
text-align: right;
padding-right: 10px;
}
.controlUnit .control {
flex: 1 1 auto;
display: flex;
}
select {
max-width: 100%;
}
input#firstname {
width: 100%;
}
.icon-item {
width: 20px;
height: 20px;
background-color: yellow;
margin-left: 10px;
}
.icon-item ~ .icon-item {
margin-left: 5px;
}

Answer 1

Try using width: 100%, instead of max-width: 100% for select in your CSS code in order to have a responsive select element at all screen sizes.
Your approach to set max-width: 100% is wrong, because select elements are form control elements and thus have to follow some implicit rules. For instance, the width of a select element cannot be made narrower than its widest option when using max-width. That's made that way by the browser and there's nothing you can do to change it. So, unless you set the width explicitly, there is no other way to achieve a responsive design.
Check out the updated jsfiddle here.