2 blocks with overflow:scroll inside each other - html

Question

I have recreated my problem in sandbox: https://codesandbox.io/s/vibrant-microservice-4rplf
I'm using custom modal and custom select. Right now I have a problem ,when I open select, it unfolds inside my modal and scroll shows up.
I want to display select over my modal , like in the picture below. I achieved this result by removing overflow:auto . But I need to leave this property in case modal gets bigger. Does anyone have an idea why this happening and how to fix it ?
.modal-block {
overflow-y: scroll;
width: 60% !important;
max-height: 300px;
margin-top: 100px;
background: #fff;
border-radius: 4px;
}

Answer 1

Change CSS modal.scss
.modal-block {
width: 60% !important;
margin-top: 100px;
background: #fff;
border-radius: 4px;
position: relative;
}
.modal-body {
padding: 24px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
max-height: 400px;
overflow-y: auto;
.pay-form {
margin: 0;
}
https://codesandbox.io/s/mystifying-lovelace-52mlg?fontsize=14&hidenavigation=1&theme=dark

Answer 2

You can not do this with css because child elements won't come out of the parent element even if you set the z-index to a higher number.
My solution is to use another modal inside the original modal. You can put your select element in the inner modal and in the outer modal just give a button at the bottom that looks like the select element and opens the inner modal on click.
You have to maintain separate state property for the inner modal.
Something like this:
export default class Main extends Component {
state = {
isOpen: true,
isSelectOpen: true
};
toggleCheckbox(key) {
console.log(key);
this.setState({ isChecked: key });
}
render() {
console.log(this.state.isChecked);
return (
<span className='group-block-wrapper'>
<Modal
title='Modal title'
isOpen={this.state.isOpen}
onOk={() => {}}
onClose={() => console.log("yoy")}
okText='pay'
>
he following is a guest post by Agop Shirinian.........
<Modal
isOpen={this.state.isSelectOpen}
onOk={() => {}}
onClose={() => console.log("yoy")}
okText='Ok'
>
<Select
title='select'
options={selectOptions}
onchange={idx => console.log(idx)}
/>
</Modal>
</Modal>
</span>
);
}
}