Html 出现垂直滚动条时使用vw单位时出现问题（WordPress中的全宽元素）

我正在开发WordPress主题，希望用户能够在其中使用全宽度块。为此，我使用以下HTML/CSS结构（简化为基本问题）

（注意：虽然这是针对WordPress主题的，但问题本身与WordPress无关，而是“仅”一个CSS问题，因为我甚至可以在一个SO代码片段中用这个非常基本的结构重现它）

*{
框大小：边框框；
}
html，
身体{
保证金：0；
身高：100%；
}
.内容{
宽度：100%；
最大宽度：400px；
保证金：0自动；
溢出y：可见；
背景：#eee；
}
.完全对齐{
左边距：计算（50%-50vw）；
保证金权利：计算（50%-50vw）；
背景：#ccc；
}

一些常规文本。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。Aliquam lorem ante，
达比布斯，维韦拉·奎斯，费吉亚·a，泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对


更多文本-应为全宽。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。等分
洛勒姆·安特，达比布斯，维韦拉·奎斯，费吉亚特·a，泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店
又是一些常规文本。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。奥雷姆阿利夸姆酒店
安特，达比布斯，维韦拉·奎斯，费吉亚特·a，泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对

你说得对，100vw不考虑滚动条，这是根据规范。它是视口宽度，视口内发生的任何事情都不在乎

您可以从另一个角度来看待它：将默认宽度设为100%，并从侧面分流窄项目

当然，您会遇到这样一个问题：此处的浅灰色背景不会延伸到项目之间的边距。我已经在这里用填充做了一些补偿，但是你必须扩展这个逻辑，以确保填充像边距一样折叠

*{
框大小：边框框；
}
html，
身体{
保证金：0；
身高：100%；
}
.内容{
宽度：100%；
保证金：0；
溢出y：可见；
}
.content>p{
背景色：#eee；
保证金：0；
填充：1em 0；
}
.content>p:未（.alignfull）{
宽度：400px；
保证金：0自动；
}
.content>p.alignfull{
背景：#ccc；
}

一些常规文本。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。Aliquam lorem ante，
达比布斯，维韦拉·奎斯，费吉亚·a，泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对


更多文本-应为全宽。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。等分
洛勒姆·安特，达比布斯，维韦拉·奎斯，费吉亚特·a，泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店
又是一些常规文本。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。奥雷姆阿利夸姆酒店
安特，达比布斯，维韦拉·奎斯，费吉亚特·a，泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对

我发表评论是为了让我能回到这个问题上来。对于Gutenberg，我依赖于完全移除居中容器，并使用CSS来针对像

p

、

ul

等元素，这些元素是主父元素的直接后代。我希望有更好的方法。好问题<代码>溢出-y：隐藏隐藏滚动条？有一个

rem

（root em）单元可以代替

vh

尝试，还有

vmin

和

vmax

，可能help@Jay这不仅会隐藏滚动条，还会切断/隐藏任何不再显示的内容……我想没有干净的通用解决方案，但因为我们从来都不希望内容触及边缘，我将通过简单地减少值来近似它：@TemaniAfif Well-全宽图像肯定应该接触边缘…请注意我问题中的添加。我以前也尝试过类似的方法，但我仍然希望找到一种容器元素定义最大宽度的方法。