使用百分比填充元素的宽高比时，Flexbox在Firefox中无法正常工作

Question

我已经使用flexbox成功创建了符合这个示意图的元素布局：

然而，在Firefox中似乎无法正常工作。Firefox不尊重内部元素设置保持纵横比。我已经尝试了这里的答案，但没有帮助。

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

.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;
}

<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>

这里是 CodePen

- Flev

Answer 1

你可以在 .flex-grid 的 parent 中添加一个固定的高度，例如在这种情况下使用 body ，或者你可以在另一个容器上使用固定的高度。

请参见下面的代码片段：

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;
}

<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>

- Mihai T

---

感谢您的回复。它部分地起作用，因为应用了.box元素后，它们不再保持其纵横比，这对我来说非常重要。您有什么想法吗？ - Flev