绝对定位的Flex项目不会从Firefox& IE11 [英] Absolutely positioned flex item is not removed from normal flow in Firefox & IE11

问题描述

容器是一个弹性盒。

在Chrome和Safari浏览器中都能正常工作，但Firefox和IE11计算绝对定位的div，并在div之间分配空间，就像有3个div一样。

我做了一个jsfiddle的例子。有没有办法解决这个错误？
https://jsfiddle.net/s18do03e/2/

div.container {display：flex; flex-direction：row;宽度：100％;身高：300px;证明内容：空间之间;宽度：100％;大纲：1px solid;} div.c1 {background：#aaeecc;宽度：100px;位置：相对; z-index：50;顶部：20px; display：flex;} div.c2 {background：#cceeaa;宽度：200px;位置：相对; z-index：50;顶部：20px; display：flex;} div.bg {background：#ccc;宽度：100％;身高：100％ z-index：0; left：0px;顶部：0px;位置：绝对; display：flex;}

 < div class =container > < div class =c1>内容1< / div> < div class =c2>内容2< / div> < div class =bg> Background< / div>< / div> > 

这是因为 justify-content：space-between; 均匀地分配项目第一个项目在开始，最后在最后。所以只需在< div class =c1>内容1<< code>< div class =bg> Background< / div> ; / div> 和< div class =c2>内容2< / div>
像这样

 < div class =container> 
< div class =c1>内容1< / div> 
< div class =bg>背景< / div> 
< div class =c2>内容2< / div> 
 
< / div> 
  

您可以在 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

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 and IE11 calculate absolute positioned div, and distributes space between divs like there are 3 divs in a row.

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>

解决方案

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

这篇关于绝对定位的Flex项目不会从Firefox& IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！