Firefox 中的 Flex 部分损坏

Question

我在 flex 容器中有一个包含 2 个矩形的部分。其中一个矩形只是有一个上边距：- 17%，Firefox 会忽略它。有没有办法在 Firefox 中分配百分比边距？ （调整窗口大小时矩形滑动得很好，而如果我使用像素作为边距则什么都不做）。

这是一个 Codepen 示例：https://codepen.io/SergiOca/pen/wdQYad

<div class="import-flex">

                <div class="export-rectangle">

                    <h1> Asesoramiento. </h1>

                    <p>
                         Test
                    </p>
                </div>

                <div class="import-rectangle">


                    <h1> <span> Oportunidad. </span></h1>

                    <p>
                        Test
                    </p>
                </div>

            <img src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="" class="import-footer-image img-responsive">    

    </div>





.import-rectangle {
    transition: ease-in-out 1s;
    position: relative;
    width: 471.7px;
    height: 409px;
    background-color: #454044;
    box-shadow: 0 0 20px 20px rgba(44, 42, 44, 0.1);
    z-index: 5;
    color: white;
    padding: 40px 50px;
    margin-top: -17%;
}

  .export-rectangle {
    position: relative;
    width: 471.7px;
    height: 407px;
    margin-right: 5%;
    background-color: #c97c60;
    z-index: 5;
    color: #454044;
    padding: 40px 50px;
}

.import-flex {
    display: flex;
    position: relative;
}

.import-footer-image {
    width: 430px;
    height: auto;
    margin: 0 auto;
    position: absolute;
    top: 93%;
    left: 30%;
    z-index: 100;
}

Answer 1

一段时间以来，Firefox 在使用百分比时遇到了一个错误，bugzilla bug，所以我建议您改用视口单位。

margin-top: -17vw;

Updated codepen

---

如果您需要调整到父元素，如果父元素的大小/位置有些固定，CSS Calc 可能会来救援。