我有一个问题,我绝对想不通。我这辈子都想不通。。
我正在构建一个自定义 WP 主题,并且遇到了一些 Flexbox 元素溢出主体宽度并创建水平滚动的问题。(见附图)
只有 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 文件和实时站点的链接,但这可能有点超出范围。
谢谢你!!
肥皂起泡泡
相关分类