使用％填充元素的纵横比时，Flexbox无法在Firefox中运行

Question

我已设法使用flexbox创建所需的元素布局：

然而，它似乎在Firefox中不起作用。 Firefox并不尊重为保持宽高比而设置的内部元素。我尝试过here的答案，但没有帮助。

*请忽略flex指令缺少前缀。我在我的代码中使用autoprefixer，因此输出CSS将包含它们。

＆＃13;

＆＃13;

.box {
    width: 100%;
    padding-bottom: 66.199%;
    background: #eee;
    position: relative;
    overflow: hidden;
}
.flex-grid {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    min-height: 100%;
}
.flex-grid .flex-grid-container {
    display: flex !important;
    display: -webkit-flex;
    flex: 1 !important;
}
.flex-grid .flex-grid-container > .flex-grid-child {
    margin-right: 20px;
    margin-bottom: 20px;
}
.flex-grid .flex-grid-container > .flex-grid-child:last-of-type {
    margin-right: 0px;
}
.flex-grid .flex-grid-row, .flex-grid .flex-grid-column {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 0px;
}
.flex-grid .flex-grid-column {
    flex-direction: column;
}
.flex-grid .flex-grid-column .flex-grid-child {
    margin-right: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.flex-grid .flex-grid-column .flex-grid-child:last-of-type {
    margin-bottom: 0px;
}
.flex-grid .flex-grid-column:last-of-type .flex-grid-child {
    margin-right: 0px;
    margin-left: 10px;
}
.flex-grid .flex-grid-mother {
    flex: 1;
    align-self: auto;
}
.flex-grid .flex-grid-child {
    flex: 1;
    align-self: auto;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

＆＃13;

<div class="flex-grid">
    <div class="flex-grid-container flex-grid-mother flex-grid-row">
        <div class="flex-grid-child">
            <div class="box"></div>
        </div>
        <div class="flex-grid-child flex-grid-row">
            <div class="flex-grid-child flex-grid-column">
                <div class="flex-grid-child">
                    <div class="box"></div>
                </div>
                <div class="flex-grid-child">
                    <div class="box"></div>
                </div>
            </div>
            <div class="flex-grid-child flex-grid-column">
                <div class="flex-grid-child">
                    <div class="box"></div>
                </div>
                <div class="flex-grid-child">
                    <div class="box"></div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Here is the CodePen

Answer 1

您可以添加parent的{​​{1}}，在这种情况下.flex-grid，固定高度，或者在这种情况下，您可以使用body

或者如果你有另一个容器在那个容器上使用固定的高度。

请参阅下面的代码段

100vh

body {
  height:100vh;
  }
.box {
    width: 100%;
    padding-bottom: 66.199%;
    background: #eee;
    position: relative;
    overflow: hidden;
}
.flex-grid {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    min-height: 100%;
}
.flex-grid .flex-grid-container {
    display: flex !important;
    display: -webkit-flex;
    flex: 1 !important;
}
.flex-grid .flex-grid-container > .flex-grid-child {
    margin-right: 20px;
    margin-bottom: 20px;
}
.flex-grid .flex-grid-container > .flex-grid-child:last-of-type {
    margin-right: 0px;
}
.flex-grid .flex-grid-row, .flex-grid .flex-grid-column {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 0px;
}
.flex-grid .flex-grid-column {
    flex-direction: column;
}
.flex-grid .flex-grid-column .flex-grid-child {
    margin-right: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.flex-grid .flex-grid-column .flex-grid-child:last-of-type {
    margin-bottom: 0px;
}
.flex-grid .flex-grid-column:last-of-type .flex-grid-child {
    margin-right: 0px;
    margin-left: 10px;
}
.flex-grid .flex-grid-mother {
    flex: 1;
    align-self: auto;
}
.flex-grid .flex-grid-child {
    flex: 1;
    align-self: auto;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}