How to adjust modal height with inline CSS in React - css

Question

Currently, the modal is too small to contain all email inputs when adding multiple users, overflowing the modal. Tried to apply CSS's height 100% property with no success. Here's some of the code:
const divEmail = {
content: {
position: "relative",
display: "block",
margin: "0 50px 0 30px",
background: "transparent"}
};
class PageAssistantSplitCourrielsCollaborateurs extends Component {
render() {
ayantDroits.push(
<div style={{ height: "100%" }}>
<div key={`champ--courriel__${elem}`}>
<Label style={divEmail} htmlFor={`champ--courriel__${elem}`}>
{_aD.name}
</Label>
<Translation>
{t => (
<Input
style={divEmail}
name={`champ--courriel__${elem}`}
id={_aD.rightHolderId}
defaultValue={_aD.email}
placeholder={t("flot.split.inscription.exemple")}
required={this.state.requis}
autoFocus={this.state.autoFocus}
type="email"
onChange={this.onChange}
/>
)}
</Translation>
</div>
</div>
);
});
return (
<div style={{ height: "100%" }}>
<Translation>
{t => (
<div>
{ayantDroits}
</div>
)}
</Translation>
</div>
);
}
}