You have to NOT use !important as far as you can, as if you add this in template css, it will be imposible for an extension to set another value for width.

Do you have tried something like :

.well select {
    max-width: 100%;
}

(well for module positions of protostar template)

@JoomliC you're correct, that will cause issues. Tested without !important and works fine. Fix submitted.

I have tested this item successfully on 1924ba8

Overflow seen before patch, on Chrome & FF.
After Patch all OK.

Not good here. Results depend on the loading or not of chosen...

1. If a smartsearch module is loaded in frontend, then it loads JHtml::_('formbehavior.chosen', 'select'); and forces the width to 180px in finder.css

.inputbox {
    width: 180px;
}

Therefore no change in the display of the select box.

NOTE: Bug:
Both https://github.com/joomla/joomla-cms/blob/staging/modules/mod_languages/tmpl/default.php and https://github.com/joomla/joomla-cms/blob/staging/components/com_finder/views/search/tmpl/default.php
lack the JHtml::_('formbehavior.chosen', 'select');
for example the chz only works if the module is loaded, it does not when the smartsearch Advanced Search is displayed in mainbody.

A specific PR should be done for that.

1. If we unpublish the module or have no extension loading JHtml::_('formbehavior.chosen', 'select');, then indeed the

.select {
    width: 100%;
}

takes over but we get an old style Select box

It looks here that when using chosen JHtml::_('formbehavior.chosen', 'select'); the Select box will only resize when reloading the page if we do not have a .input css forcing to a fixed width or auto.

I have tested this item unsuccessfully on 1924ba8

I may have found a solution.
You would keep this change in the PR which would be useful when no chosen is loaded, but after adding
JHtml::_('formbehavior.chosen', 'select');
in the files I quoted above (to be independant of smartsearch), add this css in protostar less and css

.chzn-container {
        width:98%!important;
        .chzn-search {
            input[type='text'] {
                padding:2px 4%!important;
                width:90%!important;
                margin:5px 2%;
            }
        }
        .chzn-single {
            padding:10px 1%;
        }
        .chzn-drop {
            width:100%!important;
        }
    }
}

(Did not test without !important)

here on FF it works great.

See https://www.dropbox.com/s/rcon95lix0fxapb/chozen.mp4?dl=0

This PR has received new commits.

CC: @infograf768, @sandstorm871

@infograf768 added .chzn-container rule to template.less and built template.css from .less

.chzn-container {
    width:98% !important;
    .chzn-search {
        input[type='text'] {
            padding:2px 4%! important;
            width:90% !important;
            margin:5px 2%;
        }
    }
    .chzn-single {
        padding:10px 1%;
    }
    .chzn-drop {
        width:100% !important;
    }
}

@nonumber

Would appreciate your input.

First:
You should not set the width to 100%, just add a max-width, like @JoomliC stated earlier:

select {
    max-width: 100%;
}

Secondly, the whole css for the chosen stuff is by no means 'clean'.
Using importants everywhere just seems wrong.
As far as my tests showd, this would be sufficient:

.chzn-container {
    max-width: 100%;
}

So all that needs to get added is:

select {
    max-width: 100%;
}
.chzn-container {
    max-width: 100%;
}

Or to make it specific to the modules (also following what @JoomliC stated):

.well select {
    max-width: 100%;
}
.well .chzn-container {
    max-width: 100%;
}

The less code could be:

 .well {
    select,
    .chzn-container {
        max-width: 100%;
    }
}

@wiserweb
The patch needs modifications. It should have ran through the generatecss.php cli and be limited to the div with class .well. Also it looks like we do not need .chzn-single

Here is a full .diff (using tabs instead of spaces). use that one instead of copy space from below.
https://www.dropbox.com/s/59c42486x26ag66/chosencsss.diff?dl=0

diff --git a/templates/protostar/css/template.css b/templates/protostar/css/template.css
index aa7c5ad..8c891c2 100644
--- a/templates/protostar/css/template.css
+++ b/templates/protostar/css/template.css
@@ -7518,2 +7518,16 @@
    overflow: visible;
 }
+select {
+   width: 100%;
+}
+.well .chzn-container {
+   width: 98% !important;
+}
+.well .chzn-container .chzn-search input[type='text'] {
+   padding: 2px 4% ! important;
+   width: 90% !important;
+   margin: 5px 2%;
+}
+.well .chzn-container .chzn-drop {
+   width: 100% !important;
+}
diff --git a/templates/protostar/less/template.less b/templates/protostar/less/template.less
index 61b9401..39845b8 100644
--- a/templates/protostar/less/template.less
+++ b/templates/protostar/less/template.less
@@ -645,2 +645,21 @@
    overflow: visible;
 }
+
+/* Fix for select element overflow on browser resizing */
+select {
+   width: 100%;
+}
+
+.well .chzn-container {
+   width:98% !important;
+   .chzn-search {
+       input[type='text'] {
+           padding:2px 4%! important;
+           width:90% !important;
+           margin:5px 2%;
+       }
+   }
+   .chzn-drop {
+       width:100% !important;
+   }
+}

Note: Please also test #9077

oops, looks like @nonumber post and mine criss-crossed. Testing now @nonumber proposal

@nonumber
Tested your proposal. It has a drawback when smartsearch module is displayed. We get first a fixed width (180px) from finder.css

And why is that a problem? The select doesn't overlap the boundary of the well, so seems fine.
Chosen calculates the width of the select list and applies that to the chosen div.

Setting (forcing) all selects to 100% causes all sorts of other issues, like selects that are supposed to be next to a label.
You will need to test with a lot more selects in different forms to test this.
Fixing one select in a module that potentially breaks the layout of loads of other selects (also think of 3rd party extensions) should not be an option!

I agree with you. The input original width should be decided by the extension itself or the template (i.e. by the class used).
This is why forcing all Chosen Select to follow the smartsearch finder.css 180px is not right imho.
The default in the template.css is 220px with:

select {
    width: 220px;
    border: 1px solid #ccc;
    background-color: #fff;
}

A possibility is to change the finder.css to be applied only to smartsearch:
change

.inputbox {
    width: 180px;
}

to

.finder-selects .inputbox {
    width: 180px;
}

@wiserweb
I suggest to modify the pr by using @nonumber proposal + my proposed change in finder.css

@infograf768 not sure what happened with generatecss.php. It's the second time I encounter the issue of unbuilt .css files.

ok.. this combination needs to be tested. Will create PR soon, not at dev PC at the moment.

.well {
    select,
    .chzn-container {
        max-width: 100%;
    }
}

.finder-selects .inputbox {
    width: 180px;
}

This PR has received new commits.

CC: @infograf768, @sandstorm871

Make sure you use tabs for indentation instead of spaces.

This PR has received new commits.

CC: @infograf768, @sandstorm871

@nonumber nice catch, thanks. Will keep an eye out for this in future.

I have tested this item successfully on 2084118

Test OK

I have tested this item successfully on 2084118

RTC. Thanks.

Seems to be okay now!
Just mentionned a missing empty line at end of template.less ;)

This PR has received new commits.

CC: @anibalsanchez, @infograf768, @sandstorm871

Blank line added

First time use of online editor

Thank you @wiserweb !