Css Flex Basis-未考虑未立即加载图像的元素高度

（我知道这个问题在很多情况下都有很好的记录，但在我的案例中，我似乎找不到解决办法。）

问题在于，页面底部的flexbox元素高度不够——可能是因为这些元素中的图像加载速度较慢

下面是一个例子：

如果您向下滚动到该页面的第3行或第4行，您将看到由于高度不足，这些元素被涂抹在一起

我在下面列出了我的代码，但作为前言，我尝试通过CSS和JS做了很多事情，包括（a）使用CSS转换和（b）尝试强制JS重画（更改显示、offsetHeight，甚至WebKittTransform）。所有这些都不起作用（如果您查看页面，您可以看到它目前仍在实现中）

.custom-cat1 section.bSe{
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
}
.custom-cat1 section.bSe article.no-flex{
弹性基准：100%；
页边距底部：0；
}
.custom-cat1 section.bSe article.gdl{
弹性基准：30%；
保证金：1雷姆4雷姆；
盒影：0.06像素rgba（0,0,0,2）；
}
.custom-cat1 section.bSe article.gdl.配方链接封面{
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
-webkit盒包：证明；
证明内容：之间的空间；
身高：100%；
}
.custom-cat1.bSe文章.awr{
边界：无；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
-webkit盒包：证明；
身高：100%；
垫底：15px；
}
.custom-cat1.gdl h2.entry-title{
字体大小：1.2em！重要；
页边距顶部：0！重要；
颜色：#4444；
}
.custom-cat1.bSe物品img{
宽度：100%；
高度：自动；
框大小：边框框；
最大宽度：100%；
保证金：0自动10px自动；
溢出：可见；
}
.custom-cat1.bSe文章图片：悬停，
.custom-cat1.gdl h2.条目标题：悬停{
不透明度：0.8；
转换：比例（1.04）；
}
.custom-cat1.bSe文章.awr p{
边距：0！重要；
线高：1.1米！重要；
}

»»古代网站和博客

古代网站和博客
准备好开始了吗？
艾琳·莱尔德是菲尼克斯螺旋的创始人，也是《古自身免疫系统的简单指南》的作者

凯莉·约翰逊是“快乐咬”的创始人，她在这里分享她的古旅程和令人惊叹的

一,。是什么让你对古生活方式感兴趣？回到2009年，我是一个素食主义者，濒临

一,。是什么让你对古生活方式感兴趣？我正在对我的

一,。什么让你对全食生活方式感兴趣？第一大动力是我的

阳光餐厅；科罗拉多州博尔德的聚会场所由三姐妹拥有，詹妮弗

莱斯利·奥曼是“终身平衡”的所有者和创始人。你可以在Instagram上关注她

Jessica Furnis是Spiffy Eats&；傻笑的水。你可以跟着她

一,。是什么让你对古生活方式感兴趣？奇怪的是，生命列车停在低碳

一,。是什么让你对古生活方式感兴趣？我遭受了长达十年的折磨

一,。是什么让你对古生活方式感兴趣？让我对古生活方式感兴趣的是

一,。是什么让你对古生活方式感兴趣？我在大学和研究生阶段的大部分时间

杰森·卡尔顿博士和米拉·卡尔顿，CN是卡尔顿营养学的创始人和

文明穴居人的乔治·布莱恩特是我们古时候最喜欢的人之一——他

博客赋予了博客作者Lauren Geertsen她的故事Lauren的寄托力，尽管仍然非常

1.

定义图像上的属性。这应该对浏览器有所帮助

---

示例HTML将更改为以下内容

<article class="gdl left" style="height: 656px;">
  <div class="awr">
    <h2 class="entry-title">
      <a href="http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe">10-Minute Paleo Cinnamon Raisin Toast Recipe</a>
    </h2>
    <div class="fwit">
      <a class="pst" href="http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe">
        <img class="fwI"
             src="http://paleomagazine.com/wp-content/uploads/2016/12/Paleo-Cinnamon-Raisin-Toast-Recipe-1.jpg"
             width="800"
             height="1200"
             alt="Paleo Cinnamon Raisin Toast Recipe #paleo #recipe http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe"
             title="Paleo Cinnamon Raisin Toast Recipe #paleo #recipe http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe">
      </a>
    </div>
    This is a quick and easy Paleo cinnamon raisin toast recipe. It’s perfect as a delicious...<a href="http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe">more</a>
  </div>
</article>

这是一个快速的回答