HTMLで横スクロール内のテーブルの幅がウィンドウサイズを超えた場合、親要素の幅も崩れてしまう（横並びの画面）

前提・実現したいこと

ソースに記載したように横並びでdivタグ[left-box][right-box]があり、[right-box]の幅はウィンドウ幅に合わせて可変にしたいです。
[right-box]の中に横スクロールのdivタグ[scroll-x]を用意し、その中にテーブルを作成します。
テーブルの幅が[right-box]の幅を超えると、親の[right-box]も変わってしまいます。
※CSSでtdのmin-widthを変更すると確認できます。
おそらく[right-box]の幅は[left-box]の幅を無視した、ウィンドウ幅となってしまっています。

テーブルの幅が[right-box]の幅を超えても、スクロールさせ、
[left-box] + [right-box] の幅　＝　ウィンドウサイズの幅としたいです。
right-boxの幅にmax-widthなどで固定値を設定すれば崩れなくなるのですが、固定値にしたくありません。
どのようにすれば良いでしょうか？

該当のソースコード

HTML
1<html>
2    <head>
3        <meta charset="utf-8">
4        <style>
5            body {margin:20px;}
6            .wrapper { width:100%; display: flex; flex-wrap: nowrap; }
7            .left-box { background-color:red; height:300px; min-width:300px; }
8            .right-box { background-color:blue; height:300px; width:100%;}
9            .right-button {float:right;}
10            .scroll-x { overflow-x: scroll;}
11            td {min-width :500px;}
12        </style>
13    </head>
14    <body>
15        <div class="wrapper">
16            <div class="left-box">
17                <p>left</p>
18            </div>
19            <div class="right-box">
20                <p>right</p>
21                <input type="button" class="right-button" value="test">
22                <div class="scroll-x">
23                    <table><tr>
24                        <td>a</td>
25                        <td>b</td>
26                        <td>c</td>
27                    </tr></table>
28                </div>
29            </div>
30        </div>
31    </body>
32</html>