Firefox在使用flex时忽略元素的宽度属性
Firefox在使用flex时忽略元素的宽度属性
提问于 2016-05-13 07:58:04
我试图使用不同的flex和宽度属性对齐一些元素。在Safari和Chrome中，这种行为是预期的，但在firefox中并非如此。
虽然您将元素的宽度设置为非常高的固定值，但宽度属性似乎被忽略了。
参见这里的示例：https://jsfiddle.net/wugrtwjc/
所需的行为是将两个div封装在类"r-6“中，这两个div都覆盖了父类的全部宽度(在Firefox和Chrome中都是如此)。
在firefox中，尽管宽度设置为100%，但两个div是相邻对齐的。您还可以尝试将该类的宽度设置为大约10000 of，但它仍然只占父div空间的一半。
Html设置：
<div class="layout-row">
<div class="c-l-8">
<div class="layout-col h-800">
<div class="r-6">
<div class="one"></div>
</div>
<div class="r-6">
<div class="two"></div>
</div>
</div>
</div>
</div>CSS：
.layout-row {
-webkit-flex-flow: row wrap;
width: 100%;
}
.layout-col {
-webkit-flex-flow: column wrap;
}
.layout-row, .layout-col {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.c-l-8 {
width: 66.66667%;
}
.r-6 {
width: 100%;
height: 50%;
}
.h-800 {
height: 800px;
}
.one, .two {
width: 100%;
height: 100%;
}
.one {
background: red;
}
.two {
background: blue;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-13 08:23:15
试试这段代码
<style>
.layout-row,
.layout-col {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.layout-row {
flex-flow: row wrap;
width: 100vw;
}
.layout-col {
flex-flow: column wrap;
}
.c-l-8 {
width: 100%;
}
.r-6 {
width: 100%;
height: 50%;
}
.h-800 {
height: 800px;
}
.one,
.two {
width: 100%;
height: 100%;
}
.one {
background: red;
}
.two {
background: blue;
}
</style>希望这有帮助..。
小心和愉快的编码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37204413
复制相关文章
相似问题
腾讯云开发者
