如何让Bricks Builder中区块的溢出边框不产生水平滚动条？

问题描述 #

使用Bricks Builder搭建网站，通过CSS Grid布局添加带边框的区块，需求是让其中一个区块的下边框溢出至屏幕右边缘，但不产生水平滚动条。

当前使用的自定义CSS代码：

%root% {
    position: relative;
    border-top: 25px solid #101820;
    border-right: 25px solid #101820;
}
    
%root%:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100vw;
    border-bottom: 25px solid #101820;
    z-index: 1;
}

实际情况：左上区块的边框向左溢出屏幕时无水平滚动条，但右上区块的边框溢出时会出现滚动条。已尝试width: 100%（无法实现溢出）、width: calc(100vw - 25px)等计算方式，均会触发水平滚动；且不想使用body { overflow-x: hidden;}的方案。

解决方案 #

最优实现代码 #

%root% {
    position: relative;
    border-top: 25px solid #101820;
    border-right: 25px solid #101820;
}

%root%:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    /* 让伪元素从区块左侧延伸至视口最右侧 */
    right: calc(-100vw + 100%);
    border-bottom: 25px solid #101820;
    z-index: 1;
}

原理说明 #

right: calc(-100vw + 100%)是核心：

• 100%代表父区块的宽度，100vw代表视口总宽度
• 计算结果为负，意味着伪元素的右侧边界会向右延伸100vw - 100%的距离，刚好对齐视口最右侧
• 伪元素左侧与父区块左边缘对齐，既实现了下边框向右溢出至屏幕边缘，又不会触发水平滚动条

备选方案（transform实现） #

如果上述方案在特定Grid布局下有兼容性问题，可尝试使用transform调整位置：

%root%:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    border-bottom: 25px solid #101820;
    z-index: 1;
    /* 将伪元素向左偏移，使右侧对齐视口边缘 */
    transform: translateX(calc(100% - 100vw));
}

内容的提问来源于stack exchange，提问作者vaipan