React: make boxes same size even with different content - css

Question

I have written a website which you can see here: https://konekto.world/
After the onboarding you will notice that the size of the nearly white outer box is different on every screen (especially at https://konekto.world/emergency_details). I want to have a fixed height for the box (which I might even want to make dependent on the screen size). Could you help me where and how in my code I could make the code the same size. What I did until now has the following effect: https://konekto-k8x5umx6o.now.sh
Emergencydetails/index.js
import React from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
import { withStyles } from '#material-ui/core/styles';
import { Container, Grid } from '#material-ui/core';
import { Header } from '../Layout';
import FormPersonType from './FormPersonType';
import FormEmergencyType from './FormEmergencyType';
import Textbox from './Textbox';
import AppContext from '../utils/AppContext';
import CONST from '../utils/Constants';
import ProgressiveMobileStepper from './ProgressiveMobileStepper';
const styles = theme => ({
containerWhenIPhone: {
alignItems: 'center',
height: '515.5px',
//width: '414.4px',
maxWidth: 'sm',
border: 'black',
'border-width': 'medium',
'margin-top': '50px',
background: 'rgba(255, 255, 255, 0.8)',
'border-radius': '20px'
},
container: {
alignItems: 'center',
height: '60%',
border: 'black',
'border-width': 'medium',
'margin-top': '50px',
background: 'rgba(255, 255, 255, 0.8)',
'border-radius': '20px'
},
item: {
width: '100%',
'text-align': 'center',
'border-radius': '5px',
'margin-top': '5px',
'justify-content': 'center'
},
container2: {
border: 'black',
'border-width': 'medium',
'margin-top': '30px'
},
picture: { display: 'block', margin: '0 auto' },
box: { width: '230px' }
});
class SOS extends React.Component {
static contextType = AppContext;
constructor(props) {
super(props);
this.state = {
timerOn: false,
componentType: 'type_of_emergency', //type_of_person //texbox
ambulance: false,
fire_service: false,
police: false,
car_service: false,
meAffected: false,
anotherPerson: false,
activeStep: 0
};
this.classes = props.classes;
this.handleNext = this.handleNext.bind(this);
this.handleBack = this.handleBack.bind(this);
this.handleEmergencyType = this.handleEmergencyType.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
showSettings(event) {
event.preventDefault();
}
handleNext(e) {
if (this.state.componentType === 'type_of_emergency') {
this.setState({ componentType: 'type_of_person' });
} else if (this.state.componentType === 'type_of_person')
this.setState({ componentType: 'textbox' });
else if (this.state.componentType === 'textbox') {
this.props.history.push('/transmitted_data');
}
this.setState({ activeStep: this.state.activeStep + 1 });
}
handleBack(e) {
if (this.state.componentType === 'textbox') {
this.setState({ componentType: 'type_of_person' });
} else if (this.state.componentType === 'type_of_person') {
this.setState({ componentType: 'type_of_emergency' });
} else if (this.state.componentType === 'type_of_emergency') {
this.props.history.push('/emergency_sent');
}
this.setState({ activeStep: this.state.activeStep - 1 });
}
handleEmergencyType(new_emergency_state) {
console.log(new_emergency_state);
this.setState(new_emergency_state);
}
onSubmit(e) {
console.log('in OnSubmit');
axios
.post(CONST.URL + 'emergency/create', {
id: 1,
data: this.state
})
.then(res => {
console.log(res);
console.log(res.data);
})
.catch(err => {
console.log(err);
});
}
render() {
let component;
if (this.state.componentType === 'type_of_emergency') {
component = (
<FormEmergencyType
handleComponentType={this.handleComponentType}
handleEmergencyType={this.handleEmergencyType}
emergencyTypes={this.state}
timerStart={this.timerStart}
onSubmit={this.onSubmit}
/>
);
} else if (this.state.componentType === 'type_of_person') {
component = (
<FormPersonType
handleComponentType={this.handleComponentType}
personTypes={this.state}
/>
);
} else if (this.state.componentType === 'textbox') {
component = <Textbox handleFinished={this.handleFinished} />;
}
return (
<React.Fragment>
<Header title="Specify Details" BackButton="true" />
<Container
component="main"
className={this.classes.containerWhenIPhone}
>
<Grid
container
className={this.classes.container}
direction="column"
spacing={2}
>
<Grid item sm={12} className={this.classes.item}>
{component}
</Grid>
</Grid>
<Grid
container
className={this.classes.container2}
direction="column"
spacing={2}
>
<Grid item sm={12} className={this.classes.item}>
<ProgressiveMobileStepper
handleNext={this.handleNext}
handleBack={this.handleBack}
activeStep={this.state.activeStep}
/>
</Grid>
</Grid>
</Container>
</React.Fragment>
);
}
}
export default withRouter(withStyles(styles)(SOS));
// <Container component="main" maxWidth="sm">
I conditionally render the FormPersonType, FormEmergencyType, and Textbox but they don´t contain any styling.
Thank you for your help!

Answer 1

Add the min-height: 60vh, instead of height: 60%, that will work with the fixed height.
also for the container-child fix:
.containerWhenIPhone{
overflow: auto;
box-sizing: content-box;
}