Browser zoom is causing weird behavior select box - html

Question

I got a question regarding browser zoom and my select box. I have created a custom select box with the current HTML and CSS code (JSFIDDLE):
.custom-select {
position: relative;
width: 100px;
display: inline-block;
}
.custom-select select {
width: 100%;
padding: 8px 5px 8px 10px;
height: 36px;
border: 1px solid #cacaca;
color: #0085c8;
}
.custom-select.svg > svg.dropdown-button {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
background-color: #fff;
background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
border: 1px solid #cacaca;
color: #0085c8;
display: inline-block;
}
<div class="custom-select svg">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
<svg class="dropdown-button"></svg>
</div>
Whenever you scale down your browser to for example 75% I get the following situation:
Where the word POLO is cutoff. What am I doing wrong? This should not be zooming sensitive right? Can you set CSS styling to specific zoom levels?
--EDIT
Increasing the width is not an option due to the fact that the select is been placed inside a div with a maximum width of 150px

Answer 1

You can try with giving auto width to your custom select box.
.custom-select
{
position: relative;
width:100px;
display:inline-block;
overflow:hidden
}
.custom-select select{
width:auto;
padding: 8px 5px 8px 10px;
height:36px;
border: 1px solid #cacaca;
color: #0085c8;
}
.custom-select.svg > svg.dropdown-button
{
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
background-color: #fff;
background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
background-repeat:no-repeat;
background-position:center;
pointer-events: none;
border: 1px solid #cacaca;
color: #0085c8;
display:inline-block;
}
<div class="custom-select svg">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
<svg class="dropdown-button"></svg>
</div>