[英]CSS Grid - keep proportions of grid even with long overflowing content
I have the following: https://jsfiddle.net/w19hpqzx/我有以下内容: https://jsfiddle.net/w19hpqzx/
However, I want the layout to look more like how it looks like without the code block: https://jsfiddle.net/4smwop2u/但是,我希望布局看起来更像没有代码块的样子: https://jsfiddle.net/4smwop2u/
Where the yellow aside portion isn't pushed off the screen, and where the code block .code-toolbar
would ideally just have a scrollbar.黄色部分没有被推离屏幕,代码块
.code-toolbar
理想情况下只有一个滚动条。
This can be fixed by adding a static width like:这可以通过添加 static 宽度来解决,例如:
.code-toolbar {
max-width: 300px;
overflow-x: auto;
}
But I want it to be 100% (take all of the space, no matter the size of the container).但我希望它是 100%(占用所有空间,无论容器大小)。
is this possible?这可能吗?
Just set your columns to be 50% of the container只需将您的列设置为容器的 50%
.container {
display: grid;
grid-template-columns: 50% 50%;
}
EDIT编辑
The above works, but you can keep your grid-template-columns: 1fr 1fr
if you want by adding this to your first grid element style ( main
):以上方法有效,但您可以保留您的
grid-template-columns: 1fr 1fr
,如果您愿意,可以将其添加到您的第一个网格元素样式( main
)中:
min-width: 0;
overflow: scroll;
Doing this fixes the problem, because a grid item, by default, cannot be smaller than its content.这样做可以解决问题,因为默认情况下,网格项不能小于其内容。 The properties above override this.
上面的属性覆盖了这个。
You can also remove the overflow from .code-toolbar
after this您还可以在此之后从
.code-toolbar
中删除溢出
Using the calc()
( documentation ) CSS function can do the trick:使用
calc()
(文档) CSS function 可以做到这一点:
grid-template-columns: calc(100% - 450px) 450px;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.