Issue in Sidebar in tailwind react

I am getting issue in tailwindCss actually the issue is that content is hiding behind the sidebar I have a AdminLayout which acts as a common layout in application that contains Sidebar Header and Footer as a constant and outlet will change dynamically

Admin Layout Codethis should work in flex simply but not working i dont know whyhere is the admin Layout Code

import React from 'react'import Header from './Header'import Footer from './Footer'import Sidebar from './Sidebar'import { Outlet } from 'react-router-dom'const AdminLayout = () => {  return (<><div className='bg-gray-200 min-h-screen'><Header /><div className='flex '><Sidebar /><Outlet /></div><Footer /></div></>  )}export default AdminLayout

I have tried to solve that by using flex box and grid but not working however flex box should solve the issue easily

import React from 'react'import Header from './Header'import Footer from './Footer'import Sidebar from './Sidebar'import { Outlet } from 'react-router-dom'

const AdminLayout = () => {return (<>

<Header /><div className='flex '><Sidebar /><Outlet /></div><Footer /></div></>

)}

export default AdminLayout