Flexbox 通过滚动条的精确宽度溢出主体

我有一个问题,我绝对想不通。我这辈子都想不通。。

我正在构建一个自定义 WP 主题,并且遇到了一些 Flexbox 元素溢出主体宽度并创建水平滚动的问题。(见附图)

https://img3.mukewang.com/651149820001a34203730441.jpg

只有 Flexbox 图像会溢出容器。我通过运行一小段代码来返回比视口更宽的项目来验证这一点。


我的研究表明,这是因为视口的宽度是在滚动条之前计算的,这就是我想象的导致这些问题的原因。


我可以确认这个问题不会出现在没有滚动条的页面上。


我尝试隐藏 x 溢出,但正如您可能猜到的那样,它不会使事物正确居中。


以下是受影响元素的一些代码块:


header#header {

    width: 100vw;

    height: calc(100vh - 98px);

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

    -webkit-animation: bgcolor 20s infinite;

    animation: bgcolor 10s infinite;

    -webkit-animation-direction: alternate;

    animation-direction: alternate;

}

.menu {

    position: relative;

    display: flex;

    width: 100vw;

    background-color: white;

    justify-content: space-between;

    padding: 25px;

    font-size: 3em;

}

.widget_mc4wp_form_widget {

    width: 100vw;

    padding: 25px;

    border-top: 5px dashed blue;

    border-bottom: 5px dashed blue;

}

div#copyright {

    display: flex;

    text-align: center;

    flex-direction: column;

}

我使用的是 Firefox 74.0,同样的问题发生在 chrome 和 safari 中。


如果您需要更多详细信息,我可以发布完整 CSS 文件和实时站点的链接,但这可能有点超出范围。


谢谢你!!


弑天下
浏览 80回答 1
1回答

肥皂起泡泡

好吧,似乎解决这个问题的方法是在使用 100vw 的任何 css 规则中用 % 替换 vw 。(例如,width: 100%vs width: 100vw)。我猜想 vw 是在主体宽度之前计算的,这导致这些元素溢出主体。我通过检查设置为 100vw (1920px) 的元素的宽度与使用 100% (1905px) 计算的元素的宽度来确认这一点。Firefox 中的滚动条宽度正好是 15px。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5