画面の一部に横スクロールを表示させたい

flexを使用して画面のレイアウトを作成しており、以下のようなコードとなっています。
サイドバーが画面左にあって、メインコンテンツを右側に可変幅で表示するデザインです。

scroll-container クラスの部分を横スクロールができるようにしたいのですが、可変幅となっているので上手く実現ができません。
scroll-containerクラスにwidth:1000pxなどを設定すると期待通りの動きにはなるのですが、可変幅のまま実現するにはどのようにすればいいかをご教示いただけないでしょうか。

HTML
1<header>ヘッダー</header>
2 
3<div class="container">
4    <div class="sidebar">サイドバー</div>
5    <div class="main">メインコンテンツ
6        <div class="scroll-container">
7            <img
8              src="https://placehold.jp/1500x100.png"
9            />
10            <img
11              src="https://placehold.jp/1500x100.png"
12            />
13            <img
14              src="https://placehold.jp/1500x100.png"
15            />
16            <img
17              src="https://placehold.jp/1500x100.png"
18            />
19          </div>
20        </div>
21    </div>
22</div>
23<footer>フッター</footer>

CSS
1.container{
2    display: flex;
3    height: 100vh;
4}
5.sidebar{
6    width: 300px;
7    background-color: aqua;
8}
9.main{
10    flex: 1;
11    background-color: red;
12}
13.scroll-container{
14    display: flex;
15    overflow-x: scroll;
16}

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

回答1件

ベストアンサー

下記でどうでしょう。

css
1.sidebar{
2    width: 300px;
3    background-color: aqua;
4}
5.main{
6    flex: 1;
7    background-color: red;
8    width: calc(100% - 300px); /* 追加 */
9}