How can I implement overflow-y: visible with overflow-x: scroll in my code?
The number of buttons may vary, and when there are too many, they should scroll horizontally. However, when I click the Dropdown button, I want to make sure that the dropdown lists are visible in the div. Currently, they are hidden within the div.
Any suggestions on how to achieve this?
Code Snippet:
HTML
<div class="container-fluid fill-height">
<div class="navbar navbar-expand scroll" role="group">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" id="testDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="testDropdown">
<a class="dropdown-item" href="#">Menu</a>
</div>
</div>
<!-- Buttons go here -->
</div>
</div>
CSS
.scroll {
overflow-x: scroll;
overflow-y: visible;
}