移动溢出的div Mozilla Firefox Margin

Question

我想在这里编码一个移位的div：

https://codepen.io/anon/pen/VQQdaL

相关的css：

.wrap {
    display: flex;
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
}

.box {
    position: relative;
    flex-shrink: 0;
    background: #fff;
    margin-bottom: 5%;
    width: 50%;
}

.image {
    flex-shrink: 0;
    margin-top: 5%;
    margin-left: -5%;
    width: 55%;
    background: linear-gradient(135deg, #fed2db, #212353);
}

这对我来说非常适合Chrome / Safari，但不适用于Firefox。有什么我想念的吗？

这应该是这样的：

这就是Firefox中的样子：

.section {
  background: black;
  padding: 4em 0;
}

.wrap {
  display: flex;
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}

.box {
  position: relative;
  flex-shrink: 0;
  background: #fff;
  margin-bottom: 5%;
  width: 50%;
}

.image {
  flex-shrink: 0;
  top: 5%;
  margin-left: -5%;
  width: 55%;
  background: linear-gradient(135deg, #fed2db, #212353);
}

<div class="section">
  <div class="wrap">

    <div class="box">
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>

    <div class="image"></div>

  </div>
</div>

Answer 1

问题似乎主要是由于缺乏绝对高度。我无法为这种行为产生一个简单的理由，但与此同时，I recreated the intended result in JSFiddle。希望这可以帮助。

JSFiddle代码：

＆＃13;

＆＃13;

.section {
  background: black;
  padding: 4em 0;
}

.wrap {
  display: flex;
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}

.box {
  position: absolute;
  height: 100px;
  flex-shrink: 0;
  background: blue;
  margin-bottom: 5%;
  width: 50%;
}

.image {
  position: relative;
  height: 100px;
  flex-shrink: 0;
  background: green;
  margin-top: 20px;
  margin-left: 45%;
  width: 55%;
  background: linear-gradient(135deg, #fed2db, #212353);
}

＆＃13;

<div class="section">
  <div class="wrap">

    <div class="box">
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>

    <div class="image"></div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;