использование absolute и flex в Firefox имеет проблему с позицией

Question

Мой HTML-тег выглядит так, у меня проблема в Firefox, когда я использую absolute и flex.Мне нужно <h2> внизу someBox, но оно всплывает someBox в Firefox.

<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%;}
        }
}

Answer 1

Float и 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>