Button getting hidden - css

Question

how can I do so that the button is not hidden when resizing the modal?
I'm having trouble solving this problem can someone help me?
I believe it must be simple to solve, I just couldn't find the solution yet
below is the JSX code (React) and CSS code
if you look at the image you will be better able to understand the problem
JSX (React) code below:
<Modal open={this.props.open} visible={this.props.visible}>
<div class={style.Container}>
<div class={style.Header}>
<div class={style.Title}>{data.subject}</div>
<div
class={style.Buttons2}
onClick={(event) => this.props.visible(false)}
>
<MdBackspace size="24px" color="#FFF" />
</div>
</div>
<form onSubmit={this.handleSubmit} class={style.Wrapper}>
<div class={style.Message}>
{ReactHtmlParser(this.state.message)}
</div>
<div class={style.Editor}>
<ReactQuill
value={this.state.content}
onChange={this.handleType}
/>
</div>
<div class={style.Controls}>
<input type="file" multiple onChange={this.fileSelected} />
{this.state.buttonState ? (
<button class={style.SendButton} type="submit">
Enviar
</button>
) : (
<button class={style.ButtonDisabled} disabled>
Enviar
</button>
)}
</div>
</form>
</div>
</Modal>
CSS code below:
.Container {
width: 720px;
display: flex;
flex: 1 1 100%;
flex-direction: column;
background: #f9f9f9;
border-radius: 5px;
border: 2px solid #405c77;
resize: both;
overflow: auto;
}
.Header {
width: 100%;
display: flex;
justify-content: space-between;
background: #405c77;
padding: 20px;
flex-wrap: wrap;
}
.Title {
color: #fff;
font-weight: 700;
font-size: 16px;
}
.Wrapper {
/* flex: 1 1 100%; */
height: 100%;
display: grid;
/* grid-template-rows: 60% 30% 40px; */
grid-template-rows: minmax(5px, 1fr);
}
.Message {
/* height: 100%; */
margin: 10px;
padding: 10px;
display: grid;
border-radius: 5px;
overflow-y: auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.111);
}
.Editor {
height: calc(30% - 40px);
/* height: 100%; */
margin: 10px;
}
textarea {
width: 100%;
height: 160px;
resize: none;
padding: 5px;
}
.Buttons2 {
cursor: pointer;
background-color: transparent;
outline: none;
border: none;
}
.SendButton {
display: flex;
justify-content: flex-end;
align-items: center;
height: 30px;
cursor: pointer;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
background: rgba(64, 92, 119, 0.8);
transition: all 0.1s ease-in-out;
color: #fff;
}
.SendButton:hover {
transition: all 0.1s ease-in-out;
background: rgba(64, 92, 119, 0.999);
}
.ButtonDisabled {
display: flex;
justify-content: flex-end;
align-items: center;
width: 60px;
height: 30px;
background: red;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
color: #fff;
}
.Controls {
/* height: 40px; */
/* height: 100%; */
display: flex;
flex: 1 1 100%;
flex-wrap: nowrap;
justify-content: space-between;
}
.Controls input {
margin-top: 12px;
cursor: pointer;
padding: 12px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
}

Answer 1

Maybe try putting your button inside the Editor div?
<div class={style.Editor}>
<ReactQuill
value={this.state.content}
onChange={this.handleType}
/>
<div class={style.Controls}>
<input type="file" multiple onChange={this.fileSelected} />
{this.state.buttonState ? (
<button class={style.SendButton} type="submit">
Enviar
</button>
) : (
<button class={style.ButtonDisabled} disabled>
Enviar
</button>
)}
</div>
</div>
Its difficult without being able to inspect it properly

Answer 2

try this:
{
position:fixed;
top:0;
z-index:5;
}