お世話になります。

要素を左の端からはみ出して表示させたいです。
下のコードのように親要素に
overflow:visibleとしてもうまくいかないのですね。

元の状態（画像①）
画像の説明をここに入力

↓
右にスクロール（画像②）
画像の説明をここに入力

∧∧∧∧∧ ここの100pxの部分を表示させたい。

こうしたい（画像③）
画像の説明をここに入力

<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>

[CSS]

@charset "UTF-8";

*{
  margin: 0;
  padding: 0;
}

body{
    background: black;
}

.container{
    background: gray;
    width: 500px;
    height: 500px;
    position: relative;
    left:-100px;
    /*overflow: visible; 誤り（修正）*/
}


.box{
    width: 200px;
    height: 200px;
    background: tomato;
}