I have the following code, which works perfectly fine:

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App(){

    return (
        <Router>
            <div className="app">
                <SideBar/>
                <div className="my_app">
                    <NavBar/>

                    <Switch>
                        <Route path="/some/component" render={() => <SomeComponent/>}/>
                    </Switch>
                </div>

            </div>
        </Router>
                
    );
}

export default App;

App.scss:

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


.app{
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-color: rgb(247, 249, 252);
  display: flex;
}

.my_app{
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-color: rgb(247, 249, 252);
  display: flex;
  flex-flow: column;
}

Here is how the app looks BEFORE calling the SomeComponent Route:

Here is how the app looks AFTER calling the SomeComponent Route:

As you can see there is white space that appears after the SomComponent route is called, even though the app and my_app are both set to 100vh height.

I want the layout to readjust to fill the white space, after the SomeComponent route is called, how to fix that ?