css - Firefox 无法在 100% 高度的 div 中正确包装包含的图像

Question

我有一个响应式网格显示图像和悬停时显示的其他一些内容。网格是基于 flex 的（尽管我确实尝试浮动元素以查看是否是 flex 的一些问题并且问题仍然存在）并且是流畅的。每个网格图块是父宽度的 20%，使用 height:0 和 padding-bottom:20% 创建 1:1 纵横比内容由绝对定位的 div 框住，所有角都放置在父级的 0 处（这已完成创建需要一些额外伪元素的特定边框）。图像是方形的，它们的高度设置为父级的 100%，并设置为自动。一切在 Chrome 和 Safari 中看起来和工作正常，但在 Firefox 中，包含图像的 div 不会换行到图像宽度，就好像它无法正确计算它的宽度一样，因此我的额外内容是'

这是代码的示例。在 chrome 中你可以看到想要的效果，在 FF 中你可以看到问题：

 $('.border').hover(function() {
   $('.opened').removeClass('opened');
   $(this).addClass('opened');
 });

body {
  font: 12px sans-serif;
}

.row {
  display: flex;
}

.border {
  flex-basis: 20%;
  flex-grow: 0;
  transition: flex-grow 400ms;
  height: 0;
  padding-bottom: 20%;
  background: green;
  border: 1px solid #fff;
  position: relative;
}

.opened {
  flex-grow: 1;
}

.inner {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
}

.article {
  height: 100%;
  position: relative;
  background: pink;
  display: flex;
  flex-wrap: wrap;
}

.image-holder {
  display: block;
  height: 100%;
}

.image-holder img {
  height: 100%;
  width: auto;
  display: block;
}

.article-info {
  flex-basis: 50%;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="border">
    <div class="inner">
      <div class="article">
        <div class="image-holder">
          <img src="https://i.imgur.com/upieVY9.png">
        </div>
        <div class="article-info">
          <p>
            There is some information about the item here, it can be longer.
          </p>
          <p>
          Sometimes even several paragraphs that will cut off.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="border">
    <div class="inner">
      <div class="article">
        <div class="image-holder">
          <img src="https://i.imgur.com/upieVY9.png">
        </div>
        <div class="article-info">
          <p>
            There is some information about the item here.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="border">
    <div class="inner">
      <div class="article">
        <div class="image-holder">
          <img src="https://i.imgur.com/upieVY9.png">
        </div>
        <div class="article-info">
          <p>
            There is some information about the item here.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="border opened">
    <div class="inner">
      <div class="article">
        <div class="image-holder">
          <img src="https://i.imgur.com/upieVY9.png">
        </div>
        <div class="article-info">
          <p>
            There is some information about the item here
          </p>
        </div>
      </div>
    </div>
  </div>

</div>

标签： cssfirefoxresponsive