html - 移动溢出的 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 代码:

.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);
}

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

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

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

  </div>
</div>