0
（この問題は多くの場合よくわかっていますが、私の場合は回避策を見つけることができません）フレックスベーシス - 画像がロードされない要素の高さはすぐには読み込まれません
問題は、ページの下部に向かうフレックスボックス要素の高さが不十分であることです。おそらく、これらの要素内の画像がゆっくりと読み込まれているためです。ここで
は例です：http://paleomagazine.com/paleo-websites-bloggers/
あなたは、そのページの3番目か4番目の行までスクロールダウンしている場合は、要素が不十分なため高さを一緒smushedされていることがわかります。
私は以下のコードを含めていますが、序文として、（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 & 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 & Gathering Place" title="Paleo Restaurant Feature: Shine Restaurant & Gathering Place"></a>
<p>Shine Restaurant & 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 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 & 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>ここにすべてのヘルプや提案は大歓迎です。
詳細に変更されるだろう。問題を再現するのに十分な方法がありますか？ あなたが提供したコードを使用しようとしましたが、フレックスコンテナがあなたのhtmlにありません。 また、あなたが提供したサイトのコードを使用しようとしましたが、それ以上の文脈がなければ、入れる時間よりも多くの労力がかかりました。 –
@DavidMann - すべてのコードを含むように投稿を更新しています。 （私はそれをすべて含むことに反対していません - それは不必要に長くなると思っていました）そして、私は昨日行ったいくつかの変更がこの問題を解決したと思っていました。 –