CSS solution for dropdown breaking div border

Question

I have a dropdown with very long values as options. When I select a long value, it goes beyond the borders of the containing div. Also the items above the selected item goes to top rather than “drop down”. That is the first option “ALL” goes upwards rather than downwards.

I searched and found some Javascript approaches to fix this. What is the css way to fix this?

Note: Issue observed in IE11 and Chrome. In IE6, it works just fine.

Issue

<div style="width:500px; background-color:gray">

  <table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;">
    <tbody>
      <tr>
        <td colspan="2">
          <b style="margin: 0 0 0 10px;">
            Select Provider
          </b>
        </td>
        <td colspan="2">
          <b>
            Select Locations
          </b>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="overflow:hidden; border: 3px solid purple; ">
          <div style="margin: 0 0 0 10px; padding: 0 0 0 0px; overflow:hidden; width:245px; ">
            <select name="drpVendor" id="drpVendor" fieldname="Vendor" style="width: 250px; padding: 0 0 0 0px; overflow:hidden;">
              <option selected="selected" value="">ALL</option>
              <option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option>
            </select>
          </div>
        </td>
        <td colspan="2" style="overflow:hidden; border: 1px solid blue; ">
          <select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility" style="width: 250px;">
            <option value="1">ALL</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <hr>
        </td>
      </tr>



    </tbody>
  </table>

  <input name="hidUserID" type="hidden" id="hidUserID" value="1">

</div>

IE6

Answer 1

1) First of all, the width of your two select boxes are bigger than the width of the column that contains it (you need to take into account all padding and margin used).
Once you have set the width of each of your select box to around 230px, they should fit.

2) You said "when you select a long value, it goes beyond the borders of the containing div".
Given that your select options contain more characters than what the width of your select box can hold, it has to expand to a width wide enough for options to be seen when it drops down. That is not a bug, this is how it intends to be.
If what you want is for the drop down to be of the same width as your select box, by having particularly lengthy options displayed in multi-lines. There is no good-cross-browser-compatible CSS-only solution to this, as far as I am aware. You can, however, achieve this by the use of the combination of javascript/jquery + CSS.

3) The upward/downward "issue" is to do with the different ways browsers render elements/CSS.
This "issue" can be improved upon with the use of a javascript/jquery solution as suggested in point 2.

4) Please note that IE7 and below doesn't support a lot of the javascript/jquery solution to this type of problem, but it is quite okay not to provide full support for IE6 and 7 at this time and age.
You can always have a separate CSS stylesheet for older browsers if needed.

5) You can easily convert your current layout into Div+CSS and thereby forgo the use of table, which should really only be used for the display of data.
It is easier to make your page responsive to different screen sizes, if you do your layout in Div+CSS than in table form.

6) I have put together a demo of a jquery plugin solution based on your original code for your reference. I kept the table layout in the demo but as mentioned in point 5, you should look into converting your layout into Div if possible.

Hope this helps.

$(function() {
  $("#drpVendor").selectBoxIt({
    theme: "default",
    defaultText: "ALL",
    autoWidth: false
  });
  $("#drpVendorFacility").selectBoxIt({
    theme: "default",
    defaultText: "ALL",
    autoWidth: false
  });
});

@import url("http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css");
 .selectboxit-container .selectboxit,
.selectboxit-container .selectboxit-options {
  width: 225px;
  /* Width of the dropdown button */
  border-radius: 3px;
  margin-top: 3px;
}
.selectboxit-container span,
.selectboxit-container .selectboxit-options a {
  line-height: 20px;
  height: 22px;
}
.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
  white-space: normal;
  min-height: 22px;
  height: auto;
}
.first {
  padding: 0 0 0 10px;
}
.top {
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>

<div style="width:500px; background-color:gray">

  <table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;">
    <tbody>
      <tr>
        <td colspan="2" class="first top">
          <b>Select Provider</b>
        </td>
        <td colspan="2" class="top">
          <b>
            Select Locations
          </b>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="first">
          <select name="drpVendor" id="drpVendor" fieldname="Vendor">
            <option selected="selected" value="">ALL</option>
            <option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option>
            <option value="11825">A SCD GARMENT CO LTD DIV Sample, Sample, Sample</option>
          </select>
        </td>
        <td colspan="2">
          <select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility">
            <option value="1">ALL</option>
            <option value="2">Option 1</option>
            <option value="3">Option 2</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <hr>
        </td>
      </tr>
    </tbody>
  </table>

  <input name="hidUserID" type="hidden" id="hidUserID" value="1">
</div>