Make ASP.Net Select2 DropDownList responsive using CSS

I am using below css with DropDownList, but DropDownList is not getting responsive when screen size get change.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
    $(function () {
       $(".js-example-placeholder-single").select2({
            placeholder: "Select",
            allowClear: true
        });
    });
</script>

<label for="exampleFormControlInput1" class="form-label">Email address</label>
<asp:DropDownList ID="DropDownList1" runat="server" class="form-control js-example-placeholder-single" >
    <asp:ListItem Text="None adfsdf None adfsdf None adfsdf None" Value="None"></asp:ListItem>
</asp:DropDownList>

<style type="text/css">
    .select2 { width: 100% !important; }
    .form-control{
        width: 200px !important;
        height:25px;
        font-size:medium;
    }
</style>