exploring <select> being too wide

white-space: nowrap; was a problem, as well as max-width:100% (both for .fake-select)

HTML

<div id="viewport">
    	<h2>A Form</h2>

    <fieldset>
        <div class="rpInputRow menu-like" id="divRowO_SECTION">
            <div class="rpLabel" id="divlblO_SECTION">	<span id="RFLblO_SECTION">A menu</span>
	<span class="rpRequied" id="RequiredO_SECTION">*</span>

            </div>
            <div class="rpDDField" id="RFErrDivO_SECTION">
                <!-- REMOVED class xxlarge from this select -->
                <select onchange="" class="input-46" id="RFDrpDownO_SECTION" name="RFDrpDownO_SECTION">
                    <option value="-1" selected="selected"></option>
                    <option value="1501">rea</option>
                    <option value="3200">N/A</option>
                    <option value="1480">Subcontractor</option>
                    <option value="3181">Valley</option>
                    <option value="3180">Ventura</option>
                    <option value="3220">Very Newest Section</option>
                    <option value="1481">Visitor</option>
                </select>
            </div>
        </div>
        <div class="rpInputRow menu-like" id="divRowO_SECTION">
            <div class="rpLabel" id="divlblO_SECTION">	<span id="RFLblO_SECTION">Fake menu</span>
	<span class="rpRequied" id="RequiredO_SECTION">*</span>

            </div>
            <div class="rpDDField" id="RFErrDivO_SECTION">
                <!-- Due to your testing you know that this select is wider than 480px, so manually add class xxlarge -->
                <select onchange="" class="xxlarge input-46" id="RFDrpDownO_SECTION" name="RFDrpDownO_SECTION">
                    <option value="-1" selected="selected"></option>
                    <option value="1501">really long long long long long long long long long long long long long long long</option>
                    <option value="3200">N/A</option>
                    <option value="1480">Subcontractor</option>
                    <option value="3181">Valley</option>
                   ...

SCSS

body {
    background: #eee;
    font-family: sans-serif;
}
#viewport {
    background: white;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid gray;
    
    width: 400px;
}
h2 {
    margin-left: 5%;
}
.resize-button {
    margin: 0.5em 5% 1em;
}

fieldset {
    border: none;
    margin: 0 5% 5px;
    outline: 1px solid #99e;
}
.rpInputRow {
    margin-bottom: 7px;
    outline: 1px dashed #ccc;
}
.rpLabel {
    outline: 1px solid #e99;
}
.rpRequied {
    color: #e66;
}
div.rpDDField {
    outline: 1px solid #8c8;
}


#viewport {
    overflow: hidden;
    overflow: visible;
}


.rpLabel {
    width: 24%;
    float: left;
    white-space:nowrap; /* Fixes: for small viewports, labels wrap, destroying formatting */
    /*z-index:2; /* Supposed to fix: for small viewports, selects overlap their labels 
                    - has no effect */
}
div.rpDDField {
    /*z-index:1; /* Similarly, has no effect */
    margin-left: 26%;
    /*width: 74%;  Don't need to assign width here, as divs fill space by default */
    /*clear: none; Default */
    background:#FFCC00; /* For width testing */
}
select { /* DEFAULT rules for selects */
    width: min-content;
    overflow: hidden;
}


/* Since #viewport has defined width, you'll know beforehand which selects are too wide,
   so it's a little more work, but add class xxlarge only to those too wide to fit */
select.xxlarge {
    width:100%;
}

CoffeeScript

$('.resize-button').on 'click', ->
    $viewport = $('#viewport')
    normal_width = $viewport.width()
    width_difference = 100
    time_per_difference = 1000
    $viewport.animate {width: normal_width + width_difference}, time_per_difference, ->
        $viewport.animate {width: normal_width - width_difference}, 2 * time_per_difference, ->
            $viewport.animate {width: normal_width}, time_per_difference