Input dropdown not 100% when input stretched - html

Question

Does anyone know what might be causing the width of the dropdown area not be 100% to the input itself when the input is stretched wider? In fact it becomes smaller. I've tried it in both Chrome and Edge so it's probably not browser relatred. This also happens to the auto complete dropdown.
This is my codes
#contact-form-wrapper {
padding: 20px;
width: 50%;
/* only big screens */
}
#contact-form-wrapper input:not([type="submit"]),
#contact-form-wrapper textarea {
width: 100%;
padding: 8px 5px;
border: 0;
border-bottom: 1px solid #95a5a6;
outline: none;
background: transparent;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
#contact-form-wrapper textarea {
resize: vertical;
min-height: 25px;
max-height: 250px;
}
.contact-input {
position: relative;
width: 100%;
margin-bottom: 10px;
}
<div id="contact-form-wrapper">
<form id="contact-form">
<div class="contact-input">
<input type="text" name="input-name" required>
<label for="input-name"></label>
</div>
<div class="contact-input">
<input type="text" name="input-tel" required>
<label for="input-tel"></label>
</div>
<div class="contact-input">
<input type="text" name="input-mail" required>
<label for="input-mail"></label>
</div>
<div class="contact-input">
<input type="text" list="subjects" name="input-sub" required>
<label for="input-sub"></label>
<datalist id="subjects">
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</datalist>
</div>
<div class="contact-input">
<textarea name="input-msg" required></textarea>
<label for="input-msg"></label>
</div>
<div class="contact-input">
<sub></sub>
<input type="submit" value="Verzenden">
</div>
</form>
</div>

Answer 1

As you can see it is a design of browser. it cannot be added as far as I know. The width increases up to a point and then remains constant. In this page, the menu expanded till <input list="browsers" name="browser" id="browser" style="width:447px;">. Something is limiting it after that.
If you want to fix that, you can create your own autocomplete input box easily. Refer Here.