Find my code in the sandbox: https://codesandbox.io/s/vibrant-microservice-4rplf
I am working with select and modal components. Currently, when I click on the select component, it opens inside the modal causing a scroll to appear.
https://i.sstatic.net/6lZiO.png
My goal is to have the select display over the modal as shown in the image below. I was able to achieve this by removing the overflow:scroll from the modal component. However, I need to keep overflow:scroll for cases where the modal expands. I suspect there may be an issue with z-index. Any help in solving this problem would be greatly appreciated.
https://i.sstatic.net/jENdE.png
.modal-block {
overflow-y: scroll;
width: 60% !important;
max-height: 300px;
margin-top: 100px;
background: #fff;
border-radius: 4px;
z-index: 1111;
}
.select-wrapper {
width: 100%;
position: relative;
z-index: 1600;
}