フレックスセクションがFirefoxで壊れています

Question

フレックスコンテナの内側に2つの長方形があるセクションがあります。長方形の1つには単に余白があります： - Firefoxでは無視される17％。 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は、親のサイズ/位置が多少固定されている場合は救助に来るかもしれません。