Q:

Bootstrap4: Is there a way to nest a bootstrap "btn-toolbar" in order to make it x-axis scrollable on smaller screens? 

I'm using bootstrap's "btn-toolbar" class to house a few "btn-group" class dropdown buttons on the same line.  I want the btn-toolbar div to have a fixed with so that it can be x-axis scrollable on smaller screens, so I need a parent div to house the "btn-toolbar" in order to make it ovreflow-x: scroll, and have the btn-toolbar retain it's width off-screen.  
The issue is, with the parent div in place, the dropdown menus are partially hidden behind the parent div.  When I remove the parent div (and the ability to x-axis scroll), it works just fine.  It also works with divs directly under it.  Is there a way to manipulate the elements associated so that I can keep the parent div? 
Any ideas are greatly appreciated! 
I've tried changing the z-index of all the associated divs and dynamic classes associated with the dropdown. 
<div class="wrapper">
  <div class="btn-toolbar" role="toolbar">
     <div class="btn-group">
        <button class="btn btn-outline-primary dropdown-toggle" 
           type="button" id="dropdownMenuButton" data- 
           toggle="dropdown" aria-haspopup="true" aria- 
           expanded="false">
                Dropdown button
         </button>
         <div class="dropdown-menu" aria- 
            labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else 
              here</a>
    </div>
  </div>
</div>

.wrapper {
    width: 100%;
    overflow-x: scroll;
    border-bottom: solid 1px #ccc;
}

.wrapper::-webkit-scrollbar { 
    display: none; 
} 

.btn-toolbar{
    min-width: 1000px;
}

.btn-toolbar button {
    padding: 2px 8px;
    margin: 8px 5px;
    color: #1eafed;
    border-color: #1eafed;
}

I expected the dropdowns to show on unfurl, but instead they seem to be hidden behind the bottom of the wrapper div (only about 50px tall) and beyond. 

A:

The dropdown which opens up has the property 'position:absolute' which means that it will follow the confines of its parent... and in the parent class wrapper you had defined overflow-x: scroll;;
to get around this, we had to overwrite this position:absolute property, which we do using this: 
.wrapper > .btn-toolbar > .show > .show { position:fixed ! important;     left: auto ! important; }

complete working snippet below:

.wrapper {
  width: 100%;
  overflow-x: scroll;
  border-bottom: solid 1px #ccc;
}

.wrapper::-webkit-scrollbar {
  display: none;
}

.btn-toolbar {
  min-width: 1000px;
}

.btn-toolbar button {
  padding: 2px 8px;
  margin: 8px 5px;
  color: #1eafed;
  border-color: #1eafed;
}

.wrapper>.btn-toolbar>.show>.show {
  position: fixed ! important;
  left: auto ! important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="wrapper">
  <div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
      <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false">
                Dropdown button
         </button>
      <div class="dropdown-menu" aria- labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else 
              here</a>
      </div>
    </div>
    <div class="btn-group">
      <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false">
                Dropdown button #2
         </button>
      <div class="dropdown-menu" aria- labelledby="dropdownMenuButton2">
        <a class="dropdown-item" href="#">2 - Action</a>
        <a class="dropdown-item" href="#">2 - Another action</a>
        <a class="dropdown-item" href="#">2 - Something else here</a>
      </div>
    </div>
  </div>
</div>

