position:stickyとかでサイドバーを横に固定したい

実現したいこと

position : sticly、top-0 left-0(right-0)をして、サイドバーをスクロールしても常に横に固定したい

発生している問題・分からないこと

tailwindでrightbar, leftbarにsticky top-0 left-0(right-0)を適用させても横に固定されない

該当のソースコード

pages/Desktop.tsx
1const Desktop: FunctionComponent = () => {
2  return (
3    <div className="w-full relative bg-white overflow-hidden  flex flex-col items-start justify-start">
4      <Header />
5      <div className="self-stretch h-[936px] flex flex-row items-start justify-between">
6        <Leftbar />
7        <Center />
8        <Rightbar />
9      </div>
10    </div>
11  );
12};

src/components/Leftbar.tsx
1import { FunctionComponent } from "react";
2
3const Leftbar: FunctionComponent = () => {
4  return (
5    <div className="self-stretch bg-lavender flex flex-col items-start justify-start h-[95vh] py-0 px-2 text-left text-lg text-gray-100 font-inter border-l-[1px] border-solid sticky top-0 border-lightgray-200 md:hidden">
6      <div className="flex flex-row items-start justify-center py-6 mx-auto gap-[88px]">
7        <div className="flex flex-row items-start justify-center">
8          <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative text-xs font-extrabold font-inter text-mediumblue text-left inline-block">
9            テンプレート
10          </button>
11        </div>
12        <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative text-xs inline-block italic font-light font-inter text-black text-left">
13          参照データ
14        </button>
15      </div>
16      <div className="self-stretch relative box-border h-px border-t-[1px] border-solid border-silver-100" />
17      <div className="self-stretch flex flex-col items-start justify-start pt-8 pb-0 pr-3 pl-6 gap-[16px]">
18        <div className="self-stretch flex flex-col items-start justify-start gap-[16px]">
19          <div className="self-stretch flex flex-row items-center justify-between">
20            <div className="flex flex-row items-center justify-center gap-[16px]">
21              <button className="cursor-pointer [border:none] p-0 bg-[transparent] w-[10px] relative h-[21px]  bg-[url('/public/image-3@3x.png')] bg-cover bg-no-repeat bg-[top]" />
22              <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative text-lg font-inter text-black text-left inline-block">
23                営業部
24              </button>
25            </div>
26            <div className="relative">5件</div>
27          </div>
28          <div className="self-stretch flex flex-col items-start justify-start py-0 pr-0 pl-8 gap-[16px] text-base text-black">
29            <div className="self-stretch relative">
30              ・顧客の質問への返答生成
31            </div>
32            <div className="self-stretch relative">・競合製品との比較</div>
33            <div className="self-stretch relative">
34              ・プレゼンテーション概要の作成
35            </div>
36            <div className="self-stretch relative">・FAQセクションの更新</div>
37            <div className="self-stretch relative">・販売戦略の提案</div>
38          </div>
39        </div>
40        <div className="self-stretch flex flex-row items-center justify-between">
41          <div className="flex flex-row items-center justify-center gap-[16px]">
42            <button className="cursor-pointer [border:none] p-0 bg-[transparent] w-[10px] relative h-[21px] bg-[url('/public/image-31@3x.png')] bg-cover bg-no-repeat bg-[top]" />
43            <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative text-lg font-inter text-black text-left inline-block">
44              マーケティング部
45            </button>
46          </div>
47          <div className="relative">3件</div>
48        </div>
49        <div className="self-stretch flex flex-row items-center justify-between">
50          <div className="flex flex-row items-center justify-center gap-[16px]">
51            <button className="cursor-pointer [border:none] p-0 bg-[transparent] w-[10px] relative h-[21px] bg-[url('/public/image-31@3x.png')] bg-cover bg-no-repeat bg-[top]" />
52            <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative text-lg font-inter text-black text-left inline-block">
53              情報システム部
54            </button>
55          </div>
56          <div className="relative">1件</div>
57        </div>
58        <div className="self-stretch flex flex-row items-center justify-between">
59          <div className="flex flex-row items-center justify-center gap-[16px]">
60            <button className="cursor-pointer [border:none] p-0 bg-[transparent] w-[10px] relative h-[21px] bg-[url('/public/image-31@3x.png')] bg-cover bg-no-repeat bg-[top]" />
61            <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative text-lg font-inter text-black text-left inline-block">
62              経理部
63            </button>
64          </div>
65          <div className="relative">1件</div>
66        </div>
67        <div className="self-stretch flex flex-row items-center justify-between">
68          <div className="flex flex-row items-center justify-center gap-[16px]">
69            <button className="cursor-pointer [border:none] p-0 bg-[transparent] w-[10px] relative h-[21px] bg-[url('/public/image-31@3x.png')] bg-cover bg-no-repeat bg-[top]" />
70            <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative text-lg font-inter text-black text-left inline-block">
71              法務部
72            </button>
73          </div>
74          <div className="relative">4件</div>
75        </div>
76        <div className="self-stretch flex flex-row items-center justify-between">
77          <div className="flex flex-row items-center justify-center gap-[16px]">
78            <button className="cursor-pointer [border:none] p-0 bg-[transparent] w-[10px] relative h-[21px] bg-[url('/public/image-31@3x.png')] bg-cover bg-no-repeat bg-[top]" />
79            <button className="cursor-pointer [border:none] p-0 bg-[transparent] relative text-lg font-inter text-black text-left inline-block">
80              人事部
81            </button>
82          </div>
83          <div className="relative">6件</div>
84        </div>
85      </div>
86    </div>
87  );
88};
89
90export default Leftbar;
91