Multi-select list getting cut off on x-axis when enabling "overflow-y: auto"

Question

This is a very odd issue that I am running to at work, so forgive me for not being able to supply a TON of code, but the background is that I am just trying to create a sidenav for some filters for a page. In the sidenav I have a container for all of our Bootstrap multi-select dropdowns (from this source: http://davidstutz.de/bootstrap-multiselect/) that I want to be able to vertically scroll. The issue I am running into though is that when I use overflow-y: auto or overflow-y: scroll I am seeing an odd issue where the list for the multi-select will get cutoff on the edge of the filter sidenav, but when I disable that it displays just as I would expect.

Again, this multi-select is coming from Bootstrap, but upon inspecting the css the multi-select element has the following properties:

    max-height: 350px;
    overflow: hidden auto;
    width: 397px;
    position: absolute;
    will-change: transform;
    top: 0px;
    left: 0px;
    transform: translate3d(-130px, -352px, 0px);
    z-index: 1000;
    margin: 0.125rem 0 0;

And my container for all of these multi-select elements has the following CSS:

   padding: 20px;
   position: relative;
   height: calc(100% - 70px);
   z-index: 2;
   overflow-y: auto; (<- Disabling this gives the desired display, but not scrolling behavior)

If more info is needed I will try and help where I can obviously.

I created a small codepen that captures the essential idea of what my issue is: https://codepen.io/dakotamaker1/pen/NWWeezb

If anyone has any insight that's really what I am looking for, as I am not the world's top CSS expert by any means, and there was no real clear solution on this semi-related question: Bootstrap-Multiselect: Dropdown is underneatch outer container if overflow-y is used. Cheers.

Answer 1

I don't know if this explains what you are looking for, but please see my own solution for this.

I have answered this earlier but I think I misunderstood the problem that's why my answer has been edited may times, my bad. I just replaced the position relative to static in these classes, span.multiselect-native-select, .btn-group, .btn-group-vertical in my solution below, and had some update on js to determine the right and top position for the options holder.

    $(document).ready(function() {
        $('#multiple-checkboxes').multiselect({
          includeSelectAllOption: true,
          maxHeight: 350,
          dropRight: true,
        });
      
      var position = $('.multiselect').position();
      var height = $('.btn-group').height();
      var right = ($(window).width() - ($('.btn-group').offset().left + $('.btn-group').outerWidth()));
     
        $('.dropdown-menu.pull-right')
          .css({
          top: position.top + height,
          right: right
        });
    });

.side {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  background-color: red;
  height: 100%;
}

.cont {
  padding: 20px;
  overflow-x: visible;
  overflow-y: auto;
  height: 90%;
}

.bottom {
  height: 10%;
  bottom: 0;
  position: absolute;
}

span.multiselect-native-select, .btn-group, .btn-group-vertical {
    position: static !important;
}

.dropdown-menu.pull-right {
/*   top: 55px;
  right: 50px !important; */
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">


<div class="side">
  <div class='cont'>
    <select id="multiple-checkboxes" multiple="multiple">
        <option value="php">asdlkjfhalsdfjalsd;fha;sldkfja;sldkfja;lsdkjf;alsdkfja;sldkfja;sldkjfa;lsdkfja;lsdkfja;lsdkjf;al</option>
        <option value="javascript">JavaScript</option>
        <option value="java">Java</option>
        <option value="sql">SQL</option>
        <option value="jquery">Jquery</option>
        <option value=".net">.Net</option>
    </select>
    <div class='bottom'>
      <button> Apply</button>
    </div>
  </div>
</div>