CODEWITHSUNDEEP
firefoxflexbox
Sergi
Sergi

Reputation: 1240

Flex section broken in Firefox

I have a section with 2 rectangles inside a flex container. One of the rectangles simply has a margin-top: - 17%, which is ignored by Firefox. Is there any way to assign a percentage margin in Firefox? (the rectangle slides nicely when the window is resized vs doing nothing if I use pixels as a margin).

Here is a Codepen Example: 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;
}

Upvotes: 0

Views: 48

Answers (1)

Asons
Asons

Reputation: 87191

Firefox has struggled with a bug when using percent for some time, bugzilla bug, so may I suggest you use viewport units instead.

margin-top: -17vw;

Updated codepen

If you need to adjust towards a parent element, CSS Calc might come to rescue if the parents size/position is somewhat fixed.

Upvotes: 1

Related Questions