サイドバーを固定し、サイドバーの横の領域のみスクロールできるようにしたい。

前提

ボタンを押すことでサイドバーを表示し、サイドバーにあるボタンを押すことでサイドバーの横に文字コンテンツを表示させるデザインを実装しています。
下記はデモです。
demo(CodeSandBox)

open textボタンを押すと、サイドバーの横に文字コンテンツが表示されます。
close textボタンを押すと、文字コンテンツが非表示になります。
close side barボタンを押すと、サイドバーが非表示になります。また、サイドバー横の薄暗い部分をクリックしても、サイドバーが非表示になります。

CSSはemotionを利用しています。

発生している問題

現状はサイドバーの高さより、文字コンテンツ領域の方が高いので、スクロールするとサイドバーの高さが途切れます。

下記はその状態を示す画像です。

スクロール前

スクロールすると、サイドバーが途切れて下地の薄黒い色が見えます。
![引用

実現したいこと

スクロールした際の挙動を下記の通りにしたいです。

サイドバー → スクロールされず、サイドバーの要素が欠けることなく常に表示されている
文字コンテンツ領域 → スクロールされる

該当のソースコード

SideBar.js

jsx
1const SideBar = ({ setSide }) => {
2  const [content, setContent] = useState(false);
3
4  return (
5    <Fragment>
6      <div onClick={() => setSide(false)} css={sideBarBack} />
7      <div css={sideBarWrap}>
8        <div css={sideBarStyle}>
9          <h2>Side Bar</h2>
10          <button onClick={() => setContent(true)}>open text</button>
11          <br />
12          <button onClick={() => setContent(false)}>close text</button>
13          <br />
14          <button onClick={() => setSide(false)}>close side bar</button>
15        </div>
16        {content && (
17          <div css={contentStyle}>
18            <h2>This is text content</h2>
19            <p>長文の文字</p>
20          </div>
21        )}
22      </div>
23    </Fragment>
24  );
25};
26
27const sideBarBack = css`
28  position: fixed;
29  top: 0;
30  left: 0;
31  background: black;
32  opacity: 0.8;
33  width: 100vw;
34  height: 100vh;
35`;
36
37const sideBarWrap = css`
38  position: absolute;
39  top: 0;
40  left: 0;
41  min-height: 100vh;
42  display: flex;
43`;
44
45const sideBarStyle = css`
46  position: sticky;
47  height: 100vh;
48  padding: 1rem;
49  background: tomato;
50  white-space: nowrap;
51  button {
52    font-size: 16px;
53    margin-bottom: 16px;
54    background: white;
55    cursor: pointer;
56  }
57`;
58
59const contentStyle = css`
60  background: steelblue;
61  padding: 2rem 1rem;
62  height: 100%;
63`;

試したこと

「サイドバー固定」でググると、固定したい要素にposition: sticky;を記述するとよい、という旨のページをいくつか読んだのでサイドバーに設定しましたが、効果がありませんでした。

また、「position sticky 効かない」でググると、下記のページを見つけました。

上記ページそれぞれの解決策を試しましたが、改善されませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

CodeSandboxを編集してみました。
https://codesandbox.io/s/happy-sutherland-xwz7n

実現したいことにおいてposition: stickyは必要ないかと思いました。
変更点は、contentStyleにmax-height: 100vhを設定し、コンテンツがその高さを超える場合はスクロールしたいので、overflow: scrollを指定しました。

js
1const contentStyle = css`
2  background: steelblue;
3  padding: 2rem 1rem;
4  max-height: 100vh;
5  overflow: scroll;
6`;

これでsideBarStyleと同じく高さが100vhになりましたが、問題はbox-sizingで指定するボックスサイズの算出方法です。
http://www.htmq.com/css3/box-sizing.shtml

デフォルトだとpaddingがheightに含まれないので、contentStyleとsideBarStyleでは最終的な高さが異なる上に、paddingの分だけ100vhからはみ出てしまいます。なので、paddingもheightに含まれるようにbox-sizingにborder-boxを指定します。ここれでは便宜上、親要素のスタイルであるsideBarWrapの中に含めましたが、グローバルなスタイルで指定するのが一般的だと思います。

js
1const sideBarWrap = css`
2  position: absolute;
3  top: 0;
4  left: 0;
5  min-height: 100vh;
6  display: flex;
7  * {
8    box-sizing: border-box;
9  }
10`;