CSS Grid - 即使内容过长，也能保持网格的比例答案

【问题标题】：CSS Grid - keep proportions of grid even with long overflowing contentCSS Grid - 即使内容过长，也能保持网格的比例
【发布时间】：2022-01-24 19:53:58
【问题描述】：

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

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

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

这可以通过添加静态宽度来解决，例如：

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

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

这可能吗？

【问题讨论】：

标签： html css css-grid

【解决方案1】：

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

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

编辑

上述方法有效，但如果您愿意，可以通过将其添加到您的第一个网格元素样式 (main) 来保留您的 grid-template-columns: 1fr 1fr：

min-width: 0;
overflow: scroll;

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

您还可以在此之后从.code-toolbar 中删除溢出

【讨论】：

【解决方案2】：

使用calc() (documentation) CSS 函数可以解决问题：

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

【讨论】：