Переполнение с горизонтальной прокруткой

Question

Я внедрил Выбранный раскрывающийся список внутри моего gridview. Сетка находится внутри коробки, сделанной из div.

Я хочу, чтобы он мог открываться, не ограничиваясь самой сеткой. Я могу это сделать, добавив overflow-x:visible !important; к стилю сетки.

Я хочу, чтобы сетка имела возможность горизонтальной прокрутки. Я добавляю overflow:auto; в сетку.

Но я не могу обойти оба. Если я сделаю первый и сделаю раскрывающийся список видимым, сетка перейдет через окно, и прокрутка больше не работает. Если я сделаю другой, выпадающий список позади сетки.

Есть ли способ иметь оба? Пожалуйста, не стесняйтесь использовать этот образец ниже, чтобы показать мне. И простите и проигнорируйте нечистоту кода.

https://jsfiddle.net/tqpxqose/

<table cellspacing="0" id="ContentPlaceHolder1_grdInfo" style="width:100%;border-collapse:collapse;"> 
    <tbody> 
     <tr style="height:50px;"> 
      <td> 
       <select name="ctl00$ContentPlaceHolder1$grdInfo$ctl02$ddlItemHistory" id="ddlItemHistory" class="chzn-select chzn-done" style="display: none; background-color: rgb(128, 0, 128);"> 
        <option value="27/10/2016 - Lorem ipsum dolor sit amet ">27/10/2016 -Lorem ipsum dolor sit amet </option> 
        <option value="14/09/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">14/09/2016 - Lorem ipsum dolor sit amet </option> 
        <option value="29/06/2016 - ILorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">29/06/2016 - Integration in UAT</option> 
        <option value="24/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">24/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </option> 
        <option value="23/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">23/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </option> 
        <option value="13/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">13/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </option> 
        <option value="11/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">11/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </option> 
       </select> 
       <div id="ddlItemHistory_chzn" class="chzn-container chzn-container-single chzn-container-active" style="width: 876px;" title=""><a href="javascript:void(0)" class="chzn-single chzn-single-with-drop" tabindex="-1"><span>27/10/2016 - Lorem ipsum dolor sit amet</span><div><b></b></div></a> 
        <div class="chzn-drop" style="left: 0px; width: 874px; top: 24px;"> 
         <div class="chzn-search"> 
          <input type="text" autocomplete="off" style="width: 839px;"> 
         </div> 
         <ul class="chzn-results"> 
          <li id="ddlItemHistory_chzn_o_0" class="active-result result-selected" style="">27/10/2016 - Lorem ipsum dolor sit amet</li> 
          <li id="ddlItemHistory_chzn_o_1" class="active-result" style="">14/09/2016 - Lorem ipsum dolor sit amet </li> 
          <li id="ddlItemHistory_chzn_o_2" class="active-result" style="">29/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </li> 
          <li id="ddlItemHistory_chzn_o_3" class="active-result" style="">24/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 
           Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet (</li> 
          <li id="ddlItemHistory_chzn_o_4" class="active-result" style="">23/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </li> 
          <li id="ddlItemHistory_chzn_o_5" class="active-result" style="">13/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 
           </li> 
          <li id="ddlItemHistory_chzn_o_6" class="active-result" style="">11/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 
           Lorem ipsum dolor sit amet </li> 
         </ul> 
        </div> 
       </div> 
       <script type="text/javascript"> 
          $(".chzn-select").chosen(); 
          $(".chzn-select-deselect").chosen({ 
          allow_single_deselect: true 
          }); 

         </script> 
       <script type="text/javascript"> 
          $('#ddlItemHistory').css("background-color", "purple"); 
          $("select").change(function() { 
          $('#ddlItemHistory').css('color', "yellow"); 
          }); 

         </script> 
      </td> 
      <td> 
       <span id="ContentPlaceHolder1_grdInfo_lblDocumentsOutstanding_0">TestTestTest</span> 
      </td> 
      <td> 
       <span id="ContentPlaceHolder1_grdInfo_lblDateCreated_0">20/06/2016 17:49:10</span> 
      </td> 
      <td> 
       <span id="ContentPlaceHolder1_grdInfo_lblUserCreated_0">HakanErdogan</span> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Как это:

https://jsfiddle.net/tqpxqose/2/

Что изменилось, что я удалил переполнение-х из DIV и применяется непосредственно к избранной position:absolute

<select style="position:absolute" name="ctl00$ContentPlaceHolder1$grdInfo$ctl02$ddlItemHistory" id="ddlItemHistory" class="chzn-select chzn-done" style="display: none; background-color: rgb(128, 0, 128);">