css - CSS min-height を設定しても Lighthouse が高い CLS を報告する

Question

Lighthouse の累積レイアウト シフトが高い数値を報告: 0.546

トレースを分析すると、最初は画像ブロックが必要なスペースを占有しておらず、コンテンツを下に押し込んでいることがわかりました。画像を参照してください:

image 要素のコンテナ div には min-height 設定があるため、これには驚きました。

CSS

div[itemprop="image"] {
    display: inline-block;
    float: left;
    margin-right: 10px;
    min-height: 400px;
}

#prodimage {
    width: 100%;
    max-width: 400px;
    border: 1px solid #FFF;
}

HTML

<div itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">                
    <a href="#"><span itemprop="url" content="https://www.example./com/images/10055041.png"></span>
        <picture><source type="image/webp" data-srcset="/images/10055041.webp" srcset="/images/10055041.webp">
            <img id="prodimage" data-src="/images/10055041.png" src="/images/10055041.png">
        </picture>
    </a>
</div>