html - Having problem accommodating navigation items in side drawer

Question

I am doing an app in react and I am trying to make a side drawer for mobile devices but I'm failing in accommodating some navigation items in a column format in it, I already tried to use flexbox with flex-flow, flex-direction and flex-wrap and none of them seem to work.

css code for the navigation items:

 .NavigationItems {
    margin: 0px ;
    padding: 11px;
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: column wrap;
}

@media (min-width: 500px) {
    .NavigationItems {
        flex-flow: row nowrap;
    }
}

css code for the sidedrawer:

.SideDrawer {
    height: 100%;
    background: white;
    box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 70%;
    max-width: 400px;
    z-index: 200;
    transition: transform 0.3s ease-out;
  }
  
  .Open {
    transform: translateX(40%);
  }
  
  .Closed {
    transform: translateX(400%);
  }

  

sidedrawer component:

import React from 'react'
import NavigationItems from '../NavigationItems/NavigationItems';
import classes from './SideDrawer.module.css';

const sideDrawer = props => {

  let attachedClasses = [classes.SideDrawer, classes.Closed]
  if (props.show) {
    attachedClasses = [classes.SideDrawer, classes.Open];
  }

  return (
    <nav className={attachedClasses.join(' ')}>
        <NavigationItems/>
    </nav>
  )
}

export default sideDrawer

Answer 1

等待大神解答