Search code examples
javascripthtmlcssreactjsz-index

How to fix problem with z-index and overflow:scroll

code in sandbox: https://codesandbox.io/s/vibrant-microservice-4rplf

I got select and modal components . When I click on select, it unfolds inside modal component and creates scroll.

enter image description here

I want make it like in the picture below . Display select over modal. I make it by removing overflow:scroll from modal component. But I need to leave overflow:scroll in case modal gets bigger. I think there is a problem with z-index. Could you please help me solve that problem.

enter image description here

.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;
}
Solution

  • Add overflow-y:scroll; in .modal-wrapperand remove overflow-y: scroll; and max-height: 300px; from .modal-block. Checkout the sandbox link Sandbox example