You need to override some of the default behavior of the Dialog. Its paper class implements a flexbox with a columnar flex-direction and defines a max-height of 90vh. This allows the Dialog to grow to its content and present scrollbars once it reaches 90% of the viewport’s visible height.
If you need to set the Dialog height to some percentage of the viewport, override the paper class, defining min-height and max-height in a manner similar to the example below:
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Dialog from 'material-ui/Dialog';
const styles = {
dialogPaper: {
minHeight: '80vh',
maxHeight: '80vh',
},
};
const YourDialog = ({ classes }) => (
<Dialog classes={{ paper: classes.dialogPaper }}>
<div>dialogishness</div>
</Dialog>
);
export default withStyles(styles)(YourDialog);
This will ensure that the Dialog’s height is 80% of the viewport.