Nikolay Aleshkovskiy Nikolay Aleshkovskiy - 1 month ago 7
CSS Question

Absolutely positioned flex item not being removed from normal flow in Firefox

We have two divs with content and a third div that is a background with absolute position.

Container is a flexbox.

All works fine in Chrome and Safari, but Firefox calculates absolute positioned div, and distributes space between divs like there are 3 divs in a row.

enter image description here

I've made jsfiddle example. Is there any way to fix this bug?
https://jsfiddle.net/s18do03e/2/



div.container {
display: flex;
flex-direction: row;
width: 100%;
height: 300px;
justify-content: space-between;
width: 100%;
outline: 1px solid;
}
div.c1 {
background: #aaeecc;
width: 100px;
position: relative;
z-index: 50;
top: 20px;
display: flex;
}
div.c2 {
background: #cceeaa;
width: 200px;
position: relative;
z-index: 50;
top: 20px;
display: flex;
}
div.bg {
background: #ccc;
width: 100%;
height: 100%;
z-index: 0;
left: 0px;
top: 0px;
position: absolute;
display: flex;
}

<div class="container">
<div class="c1">Content 1</div>
<div class="c2">Content 2</div>
<div class="bg">Background</div>
</div>




Answer

It is happening because justify-content: space-between; Distribute items evenly The first item at the start, the last at the end. So just putt <div class="bg">Background</div> between <div class="c1">Content 1</div> and <div class="c2">Content 2</div> like this

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>

</div>

You can see the reason on https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Comments