「メルカリのように、左をスクロールしても固定され、右側だけスクロール、下端に到達したら左もスクロール」の実装の仕方について

https://jp.mercari.com/
メルカリの商品詳細画面のように、画面左側をスクロールしても固定されつづけ、右側だけがスクロールされる。また、右側の下端（メルカリの場合はコメントセクションの最後）に到達したら、左側も含めた画面全体が通常通りにスクロールされる、といったものを実装したいのですが、アドバイスをいただきたいです。
メルカリのhtml, cssを覗いて、grid, overflow-y: autoでなんとか実装しようと思っていましたが、なかなかうまくいかないです。

よろしくお願いします。

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

回答2件

hatena19さんが既に回答されていますが、簡単なサンプルを組んでみました。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <title>sticky test</title>
5    </head>
6    <body>
7        <style>
8            * {
9                box-sizing: border-box;
10            }
11
12            .container {
13                max-width: 1040px;
14                height: 3000px;
15                margin: 0 auto;
16                padding: 0 20px;
17                background-color: chocolate;
18            }
19
20            .flex-container {
21                display: flex;
22                flex-flow: row nowrap;
23            }
24
25            .main {
26                padding: 0;
27                margin: 0;;
28                width: 70%;
29                background-color: burlywood !important;
30            }
31
32            .sidebar {
33                width: 30%;
34                padding: 0;
35                margin: 0;
36                background-color: aqua !important;
37            }
38            .sidebar p {
39                position: sticky;
40                top: 0;
41            }
42        </style>
43
44<div class="container">
45    <div class="flex-container">
46
47        <aside class="sidebar">
48            <p>固定される部分</p>
49        </aside>
50
51        <main class="main">
52            <div class="content">
53                <p>
54                    スクロールする部分<br>
55                    スクロールする部分<br>
56                    スクロールする部分<br>
57                    スクロールする部分<br>
58                    スクロールする部分<br>
59                    スクロールする部分<br>
60                    スクロールする部分<br>
61                    スクロールする部分<br>
62                    スクロールする部分<br>
63                    スクロールする部分<br>
64                    スクロールする部分<br>
65                    スクロールする部分<br>
66                    スクロールする部分<br>
67                    スクロールする部分<br>
68                    スクロールする部分<br>
69                    スクロールする部分<br>
70                    スクロールする部分<br>
71                    スクロールする部分<br>
72                    スクロールする部分<br>
73                    スクロールする部分<br>
74                    スクロールする部分<br>
75                    スクロールする部分<br>
76                    スクロールする部分<br>
77                    スクロールする部分<br>
78                    スクロールする部分<br>
79                    スクロールする部分<br>
80                    スクロールする部分<br>
81                    スクロールする部分<br>
82                    スクロールする部分<br>
83                    スクロールする部分<br>
84                    スクロールする部分<br>
85                    スクロールする部分<br>
86                    スクロールする部分<br>
87                    スクロールする部分<br>
88                    スクロールする部分<br>
89                    スクロールする部分<br>
90                    スクロールする部分<br>
91                    スクロールする部分<br>
92                    スクロールする部分<br>
93                    スクロールする部分<br>
94                    スクロールする部分<br>
95                    スクロールする部分<br>
96                    スクロールする部分<br>
97                    スクロールする部分<br>
98                    スクロールする部分<br>
99                    スクロールする部分<br>
100                    スクロールする部分<br>
101                    スクロールする部分<br>
102                </p>
103            </div>
104        </main>
105    
106
107    </div>
108    その他のエリア
109</div>
110    </body>
111</html>