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

Question

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

问题在于页面底部的 flexbox 元素高度不足 - 可能是因为这些元素中的图像加载缓慢。

这是一个例子：http://paleomagazine.com/paleo-websites-bloggers/

如果您向下滚动到该页面的第 3 行或第 4 行，您会看到由于高度不足，元素被挤在一起。

我在下面包含了我的代码，但作为前言，我尝试通过 CSS 和 JS 做很多事情，包括 (a) 使用 CSS 转换和 (b) 尝试强制 JS 重绘（更改display、offsetHeight 甚至 webkitTransform）。这些都不起作用（如果您检查页面，您可以看到它目前仍在实施）。​​

.custom-cat1 section.bSe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.custom-cat1 section.bSe article.no-flex {
    flex-basis: 100%;
    margin-bottom: 0;
}

.custom-cat1 section.bSe article.gdl {
    flex-basis: 30%;
    margin: 1rem .4rem;
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
}

.custom-cat1 section.bSe article.gdl .recipe-link-cover {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    height: 100%;
}

.custom-cat1 .bSe article .awr {
    border: none;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    height: 100%;
    padding-bottom: 15px;
}

.custom-cat1 .gdl h2.entry-title {
    font-size: 1.2em !important;
    margin-top: 0 !important;
    color: #444444;
}

.custom-cat1 .bSe article img {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto 10px auto;
    overflow: visible;
}

.custom-cat1 .bSe article img:hover,
.custom-cat1 .gdl h2.entry-title:hover {
    opacity: 0.8;
    transform: scale(1.04);
}

.custom-cat1 .bSe article .awr p {
    margin: 0 !important;
    line-height: 1.1em !important;
}

<div class="wrp cnt gin custom-cat1">
    <section class="bSe fullWidth">
        <article class="no-flex">       
            <p id="breadcrumbs"><span xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="http://paleomagazine.com/" rel="v:url" property="v:title">Home</a> » <span rel="v:child" typeof="v:Breadcrumb"><a href="http://paleomagazine.com/paleo-diet/" rel="v:url" property="v:title">Paleo Diet</a> » <strong class="breadcrumb_last">Paleo Websites and Bloggers</strong></span></span></span></p>
            <div class="category-title">
                <h1><span>Paleo Websites and Bloggers</span></h1>
            </div>
            <div class="subheader-optin">
                <p>Ready to Get Started? <a><span class="tve-leads-two-step-trigger tl-2step-trigger-25517" style="display: inline;">Get Our Free 4-Week Paleo Meal Plan</span></a></p>
            </div>
        </article>
        <article class="gdl left" style="height: 450px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-eileen-laird">Blogger Spotlight – Eileen Laird</a></h2>                    
                <a href="http://paleomagazine.com/blogger-spotlight-eileen-laird"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2016/02/Blogger-Spotlight-–-Eileen-Laird.jpg" alt="Blogger Spotlight – Eileen Laird" title="Blogger Spotlight – Eileen Laird"></a>
                <p>Eileen Laird is the founder of Phoenix Helix and author of A Simple Guide to the Paleo Autoimmune... <a href="http://paleomagazine.com/blogger-spotlight-eileen-laird">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 450px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson">Blogger Spotlight – Kaylie Johnson</a></h2>                    
                <a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2016/02/Blogger-Spotlight-Kaylie-Johnson.jpg" alt="Blogger Spotlight - Kaylie Johnson" title="Blogger Spotlight - Kaylie Johnson"></a>
                <p>Kaylie Johnson is the founder of Joyful Bite, where she shares her Paleo journey and amazing... <a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 450px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-stefani-ruper">Blogger Spotlight – Stefani Ruper</a></h2>                    
                <a href="http://paleomagazine.com/paleo-blogger-stefani-ruper"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/12/Blogger-Spotlight-Stefani-Ruper.jpg" alt="Blogger Spotlight - Stefani Ruper" title="Blogger Spotlight - Stefani Ruper"></a>
                <p>1. What got you interested in the Paleo lifestyle? Back in 2009, I was a vegetarian on the verge of... <a href="http://paleomagazine.com/paleo-blogger-stefani-ruper">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 480px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-mark-sisson">Blogger Spotlight – Mark Sisson</a></h2>                    
                <a href="http://paleomagazine.com/paleo-blogger-mark-sisson"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/10/Blogger-Spotlight-Mark-Sisson.jpg" alt="Blogger Spotlight - Mark Sisson" title="Blogger Spotlight - Mark Sisson"></a>
                <p>1. What got you interested in the Paleo lifestyle? I was going through a major reevaluation of my... <a href="http://paleomagazine.com/paleo-blogger-mark-sisson">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 480px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-sarah-pope">Blogger Spotlight – Sarah Pope</a></h2>                    
                <a href="http://paleomagazine.com/paleo-blogger-sarah-pope"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/12/Blogger-Spotlight-Sarah-Pope.jpg" alt="Blogger Spotlight - Sarah Pope" title="Blogger Spotlight - Sarah Pope"></a>
                <p>1. What got you interested in the whole foods lifestyle? The first big motivator was my... <a href="http://paleomagazine.com/paleo-blogger-sarah-pope">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 480px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado">Paleo Restaurant Feature: Shine Restaurant &amp; Gathering Place</a></h2>                    
                <a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2015/11/Paleo-Restaurant-Feature-Shine-Restaurant-Gathering-Place1.jpg" alt="Paleo Restaurant Feature: Shine Restaurant &amp; Gathering Place" title="Paleo Restaurant Feature: Shine Restaurant &amp; Gathering Place"></a>
                <p>Shine Restaurant &amp; Gathering Place in Boulder Colorado is owned by triplet sisters, Jennifer,... <a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 450px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-leslie-auman">Blogger Spotlight – Leslie Auman</a></h2>                    
                <a href="http://paleomagazine.com/blogger-spotlight-leslie-auman"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/08/Leslie-Auman.jpg" alt="Blogger Spotlight - Leslie Auman" title="Blogger Spotlight - Leslie Auman"></a>
                <p>Leslie Auman is the owner and founder of&nbsp;The Whole Life Balance. You can follow her on Instagram,... <a href="http://paleomagazine.com/blogger-spotlight-leslie-auman">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 450px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss">Blogger Spotlight – Jessica Furniss</a></h2>                    
                <a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/08/Blogger-Spotlight-Jessica-Furniss.jpg" alt="Blogger Spotlight - Jessica Furniss" title="Blogger Spotlight - Jessica Furniss"></a>
                <p>Jessica Furniss is the author behind Spiffy Eats &amp; Giggle Water. You can follow her on... <a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 450px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky">Blogger Spotlight – Ainsley Daschofsky</a></h2>                    
                <a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2015/09/Blogger-Spotlight-–-Ainsley-Daschofsky.jpg" alt="Blogger Spotlight - Ainsley Daschofsky" title="Blogger Spotlight – Ainsley Daschofsky"></a>
                <p>1. What got you interested in the Paleo lifestyle? Oddly, the life train stopped at the low carb... <a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 220px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-chris-kresser">Blogger Spotlight – Chris Kresser</a></h2>                    
                <a href="http://paleomagazine.com/paleo-blogger-chris-kresser"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/09/Blogger-Spotlight-Chris-Kresser.jpg" alt="Blogger Spotlight - Chris Kresser" title="Blogger Spotlight - Chris Kresser"></a>
                <p>1. What got you interested in the Paleo lifestyle? I suffered from a decade-long, debilitating... <a href="http://paleomagazine.com/paleo-blogger-chris-kresser">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 220px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-mary-herrington">Blogger Spotlight – Mary Herrington</a></h2>                    
                <a href="http://paleomagazine.com/blogger-spotlight-mary-herrington"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Blogger-Spotlight-Mary-Herrington.jpg" alt="Blogger Spotlight – Mary Herrington" title="Blogger Spotlight – Mary Herrington"></a>
                <p>1. What got you interested in the Paleo lifestyle? What got me interested in the Paleo lifestyle is... <a href="http://paleomagazine.com/blogger-spotlight-mary-herrington">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 220px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon">Blogger Spotlight – Danielle Gagnon</a></h2>                    
                <a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Blogger-Spotlight-Danielle-Gagnon.jpg" alt="Blogger Spotlight - Danielle Gagnon" title="Blogger Spotlight - Danielle Gagnon"></a>
                <p>1. What got you interested in the Paleo lifestyle? I spent most of my college and post-grad years... <a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 220px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/natures-palette-for-perfect-health">Nature’s Palette for Perfect Health</a></h2>                    
                <a href="http://paleomagazine.com/natures-palette-for-perfect-health"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Natures-Palette-for-Perfect-Health.jpg" alt="Nature's Palette for Perfect Health" title="Nature's Palette for Perfect Health"></a>
                <p>Jayson Calton, PhD and Mira Calton, CN are the founders of Calton Nutrition and the authors of... <a href="http://paleomagazine.com/natures-palette-for-perfect-health">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 220px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/interview-with-george-bryant">Interview with George Bryant – Civilized Caveman</a></h2>                    
                <a href="http://paleomagazine.com/interview-with-george-bryant"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/04/george-bryant-featured-image.jpg" alt="george bryant featured image" title="george bryant featured image"></a>
                <p>George Bryant of Civilized Caveman is one of our favorite people in Paleo – he’s... <a href="http://paleomagazine.com/interview-with-george-bryant">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <article class="gdl left" style="height: 220px;">
            <div class="awr">
                <h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance">Favorite Bloggers: Empowered Sustenance</a></h2>                    
                <a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance"><img class="fwI" width="630" height="630" src="http://paleomagazine.com/wp-content/uploads/2014/12/lauren-geertsen.jpg" alt="lauren geertsen - empowered sustenance" title="lauren geertsen - empowered sustenance"></a>
                <p>The Blog Empowered Sustenance The Blogger Lauren Geertsen Her Story Lauren, although still very... <a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance">more</a></p>
            </div>
        </article>
        <div class="spr"></div>
        <div class="clear"></div>
        <div class="awr ctr pgn">
            <span class="page-numbers current">1</span>
            <a class="page-numbers" href="http://paleomagazine.com/paleo-websites-bloggers/page/2/">2</a>
            <a class="next page-numbers" href="http://paleomagazine.com/paleo-websites-bloggers/page/2/">Next »</a>
        </div>
        <div class="bspr"></div>
        <div class="clear" style="width: 100%; height: 1px; margin: 0;"></div>
        <div class="custom-category-description"></div>
        <div class="clear" style="width: 100%; height: 1px; margin: 0;"></div>
        <div class="category-page-bottom-optins">
            <div>
                <a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', '7-Day Challenge', {'nonInteraction': 1});">
                    <span class="tve-leads-two-step-trigger tl-2step-trigger-25371" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/challenge-optin.jpeg" height="300" width="300"></span>
                </a>
                <img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', '7-Day Challenge', {'nonInteraction': 1});">
            </div>
            <div>
                <a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', 'Favorite 11 Recipes', {'nonInteraction': 1});"><span class="tve-leads-two-step-trigger tl-2step-trigger-16874" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/favorite-paleo-recipes.jpg" height="300" width="300"></span></a>
                <img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', 'Favorite 11 Recipes', {'nonInteraction': 1});">
            </div>
            <div>
                <a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', 'Meal Plan', {'nonInteraction': 1});"><span class="tve-leads-two-step-trigger tl-2step-trigger-25517" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/meal-plan-optin.jpeg" height="300" width="300"></span></a>
                <img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', 'Meal Plan', {'nonInteraction': 1});">
            </div>
        </div>
    </section>
</div>

非常感谢这里的任何帮助或建议。

Answer 1

在图像上定义width 和height 属性。这应该有助于浏览器render page correctly before loading image content。

---

示例 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>