Firefox中的CSS“display：flex”/ row问题（使用bootsrap）

Question

我正在处理的网站在除Firefox之外的所有浏览器（IE，Chrome，Safari，Mobile）中都能正确显示。

在所有浏览器（Firefox除外）中， div class =“vertical-center”中的内容在x轴上居中对齐并填充页面的整个宽度：

然而，在Firefox中， div class =“row”被压缩到页面左侧**：

有没有办法解决这个问题？有什么我做错了吗？

HTML：

<section> 
    <div class="vertical-center">
        <div class="row">
            <!-- Row should fill width of "section", but does not in Firefox -->
        </div>
    </div>
</section>

CSS：

.vertical-center {
min-height: 50%;
min-height: 50vh;
display: flex; /* This causes a problem, but is required for proper display*/
align-items: center;
}

Answer 1

似乎Firefox没有正确计算div.row的宽度，作为块元素应该是100％。

所以你需要自己设置它。

.vertical-center .row { width:100%; }