Html Firefox中的flexbox项目定位不正确

我有一个水平行，有两个50%/50%的容器。其中之一是flexbox容器，它包含两个具有不同位置值的元素：

代码看起来是这样的（不要注意西里尔文）：

（我只经过这里。等级库名称样式原因。等级库描述没有问题）

---

问题 当我在Firefox中打开此页面时，我看到：

我不知道如何修复它，因为我在其他基于webkit的浏览器（以及Edge）中看不到任何问题

所以，我只有一个问题——如何修复它

<div class="row spec-row">
    <div class="col-md-6 spec-name">
        <img src="images/specs/it-spec.jpg" alt="IT-специалист">
        <h4 class="display-5">IT-специалист</h4>
    </div>
    <div class="col-md-6 spec-desc">
        <p>IT-специалист – широкое понятие, объединяющее в себе представителей многих профессий, работающих в области информационных технологий.
            Это всевозможные программисты, разработчики, администраторы сетей и баз, модераторы, специалисты по робототехнике, по информационной безопасности, web-дизайнеры и даже 3D-аниматоры.
            При этом, с проникновением информационных технологий во всё новые сферы деятельности, появляются новые профессии для IT-специалистов.</p>
    </div>
</div>

.spec-row .spec-name {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  justify-content: center;
  vertical-align: middle; }
.spec-row .spec-name img {
  position: relative;
  width: 100%;
  filter: blur(5px) grayscale(100%);
  transition: filter 0.3s ease; }
.spec-row .spec-name h4 {
  position: absolute;
  vertical-align: middle;
  text-align: center;
  width: 95%;
  padding: 1rem 5%;
  margin: auto;
  transition: 0.3s ease; }