html - PrismJs が CSS グリッドでオーバーフローしない

Question

弾力性のあるコンテンツ div と固定幅の列が右側にあるページ レイアウトがあります。そのために、次の基本構造があります。

<div class="grid">
  <div class="content">
    Content here
  </div>
  <div class="column">
    Fixed right column
  </div>
</div>

そしてCSS：

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto 280px;
    width: 500px;
}

.content {
  background: tomato;
}

.column {
  background: deepskyblue;
}

autoコンテンツが合計スペースから固定列幅を差し引いたものを埋めることを期待していました。プリズムタグであるdivのコンテンツがその幅を超えている場合を除いて、それは実際に起こります。PrismJs div で水平スクロール バーを生成する代わりに、単にコンテンツ div をオーバーフローさせ、列をさらに右に押します。

列を押すのではなく、スクロールバーを div に表示する方法についてのアイデアはありますか?

コンテンツの幅に固定値を設定すると、期待どおりに機能することに注意してください。

次に例を示します。

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto 280px;
    width: 500px;
}

.content {
  background: tomato;
}

.column {
  background: deepskyblue;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism.css">
    <link href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism-coy.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/prism/1.2.0/prism.js"></script>


<div class="grid">
  <div class="content">
    <pre><code class="language-javascript">@Component({
        selector: "main",
        directives: [],
        template: `
            &lt;button
                (tap) = "onTapMe()"
                text = "tap me" /&gt;
        `
    })
    class MainPage {
        onTapMe() {
            alert("Hello from Angular 2");
        }
        // long coment pushing the right column further right !!!
    }
    </code></pre>
  </div>
  <div class="column">
  
  </div>
</div>

これは、試してみるための実用的なフィドルです: https://jsfiddle.net/4crm25pq/1/