CSS网格-即使有长时间溢出的内容，也要保持网格的比例

Question

我有以下内容：https://jsfiddle.net/w19hpqzx/

然而，我希望布局看起来更像没有代码块的样子：https://jsfiddle.net/4smwop2u/

黄色的旁白部分没有被推离屏幕，代码块.code-toolbar理想情况下只有一个滚动条。

这可以通过添加静态宽度来修复，如：

.code-toolbar {
max-width: 300px;
overflow-x: auto;
}

但我希望它是100%(占用所有空间，无论容器大小(。

这可能吗？

Answer 1

只需将列设置为容器的50%

.container {
display: grid;
grid-template-columns: 50% 50%;
}

编辑

上面的方法是可行的，但如果你想保留grid-template-columns: 1fr 1fr，可以将其添加到你的第一个网格元素样式(main(中：

min-width: 0;
overflow: scroll;

这样做可以解决问题，因为默认情况下，网格项不能小于其内容。上面的属性会覆盖此项。

您也可以在之后删除.code-toolbar的溢出

Answer 2

使用calc()(文档(CSS函数可以实现以下功能：

grid-template-columns: calc(100% - 450px) 450px;