Css 当pre/code内容太长，但希望使内容可滚动时，列向右扩展

我有一个简单的三列布局：

<div class="container-fluid">
    <div class="row">
        {{!-- Left space --}}
        <div class="col-2 d-none d-md-block"></div>

        {{!-- Content --}}
        <div class="col px-5 py-4 post-body">
            {{{contents}}}
        </div>

        {{!-- Right space --}}
        <div class="col-2 d-none d-md-block"></div>
    </div>
</div>

/* Code blocks */
code.hljs, code {
    border-style: solid;
  border-width: thin;
  border-color: white;
  border-radius: .3em;
  font-size: 0.8125rem; // 13px
  line-height: 21px;
}

code.hljs {
  margin-left: 0px;
  margin-right: 0px;
  padding: 1em; 
}

code {
  margin-left: 3px;
  margin-right: 3px;
  padding: 2px 4px;
}

如果屏幕截图中下面的代码行（

抛出新的InvalidOperationException（“要移位的位置必须大于零！”）；

）太长，则在进一步缩小视口宽度时，中间列的行为不再如预期的那样

从这个屏幕截图可以看到，它向右侧展开。然而，我希望它保持其宽度比，并使代码可滚动

这是我的样式表中的相关CSS部分：

---

我在这里做错了什么？

我想您应该使用

col-md-8 col

，这样它只在其他列被隐藏时填充宽度

左边

赖特 演示：

/* Code blocks */
code.hljs, code {
    border-style: solid;
  border-width: thin;
  border-color: white;
  border-radius: .3em;
  font-size: 0.8125rem; // 13px
  line-height: 21px;
}

code.hljs {
  margin-left: 0px;
  margin-right: 0px;
  padding: 1em; 
}

code {
  margin-left: 3px;
  margin-right: 3px;
  padding: 2px 4px;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-2 d-none d-md-block">Left </div>
        <div class="col-md-8 col px-5 py-4 post-body border">
            <pre>
              <code class="hljs csharp">
              </code>
            </pre>
        </div>
        <div class="col-2 d-none d-md-block">Right </div>
    </div>
</div>