Issue: The <Navigation/> components disappear when using flex-direction: column-reverse.
However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible.
My objective is to display my <Navigation/> component as a bottom navigation bar, similar to an iPhone app.
Below is my code snippet:
<div className="app">
<Router>
<div className="navigation__wrapper">
<Navigation />
</div>
<div className="route__wrapper">
<AppWrapper>
<Switch>
<Route
exact
path="/"
render={() => (
<MainLayout>
<Homepage />
</MainLayout>
)}
/>
</Switch>
</AppWrapper>
</div>
</Router>
</div>
Here is the CSS used:
.app {
-ms-overflow-style: none;
scrollbar-width: none;
background-color: var(--main-background);
font-family: "Poppins";
max-width: 100vw;
min-width: 100vh;
display: flex;
flex-direction: column-reverse;
}