css - 在Firefox中使用absolute和flex存在位置问题

我的html标签是这样的，当我使用absolute和flex时，在Firefox中出现问题。
我在<h2>底部需要someBox，但是它在Firefox中浮出someBox。

<div class="leftPointBox">
  <a class="someBox">
    <div class="wrap">
      <picture>
        <source media="(max-width: 414px)" srcset="img/420x315.jpg">
        <source media="(min-width: 413px)" srcset="img/800x600.jpg">
        <img src="img/800x600.jpg" srcset="img/420x315.jpg 414w, img/800x600.jpg 1024w">
      </picture>
    </div>
    <h2>TITLE</h2>
  </a>
</div>

css（scss）：

.someBox {
    position: relative;
    overflow: auto;
}
.leftPointBox{
    width: 380px;
    float: left;

    h2 {
        text-align: left;
        font-weight: 600;
        color: #ffffff;
        font-size: 20px;
        background-color: #004E98;
        position: absolute;
        bottom: 0;
        width: 360px;
        padding: 10px;
        margin-bottom: 0;
    }
}
.someBox .wrap {
    height: 285px;
}

.wrap {
    position: relative;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 10px;
    img {
        max-width: 100%;
        max-height: 100%;
        @media screen and (max-width: 1024px){ flex: inherit; max-width: 100%;}
        }
}

最佳答案

浮点数和flexbox在某些条件下不太喜欢彼此。我删除了所有浮动元素，以保持文档流完整无缺，并将flexbox从.wrap移至.someBox。现在，使用align-self可以将标题放置在底部。

我将.someBox的高度设置为600px，只是为了演示标题将在底部。

.someBox {
  display: flex;
  flex-wrap: wrap;
  height: 600px; /* Demo purpose only */
}

.leftPointBox {
  width: 380px;
}

.leftPointBox h2 {
  text-align: left;
  font-weight: 600;
  color: #ffffff;
  font-size: 20px;
  background-color: #004E98;
  padding: 10px;
  margin-bottom: 0;
  align-self: flex-end;
  width: 100%;
}

.someBox .wrap {
  height: 285px;
}

.wrap {
}

.wrap img {
  max-width: 100%;
  max-height: 100%;
}

<div class="leftPointBox">
  <a class="someBox">
    <div class="wrap">
      <picture>
        <source media="(max-width: 414px)" srcset="https://via.placeholder.com/420x315">
        <source media="(min-width: 413px)" srcset="https://via.placeholder.com/800x600">
        <img src="https://via.placeholder.com/800x600" srcset="https://via.placeholder.com/420x315 414w, https://via.placeholder.com/800x600 1024w">
      </picture>
    </div>
    <h2>TITLE</h2>
  </a>
</div>

关于css - 在Firefox中使用absolute和flex存在位置问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52443425/