CSS网格中带有空格的代码标签会导致布局中断

Question

我确实有一个容器，该容器显示为带有三个孩子的网格；左一（.25fr），一中（1fr），一右（.25fr）。一旦我在确实有很多空白的中间孩子中插入<code>标签，整个布局就会被破坏。

我还尝试提供pre和/或code的最大宽度/溢出，但是没有固定方法。

有人知道吗？

.test {
  width: 600px;
  background-color: #cacaca;
  display: grid;
  grid-template-columns: 0.25fr 1fr 0.25fr;
  margin-bottom: 50px;
}

.left {
  background-color: green;
}

.right {
  background-color: red;
}

<div class="test">
  <div class="left">
    left
  </div>
  <div class="mid">
    <pre>
      <code>                                                    ff</code>
    </pre>
  </div>
  <div class="right">
    right
  </div>
</div>

<div class="test">
  <div class="left">left</div>
  <div class="mid">mid</div>
  <div class="right">right</div>
</div>

Fiddle