display: flex;を指定した子要素をposition: absolute;するとバグることがあるよ、のお話

CSS

flexで配置した要素を無理やりabsoluteで動かそうとすると、環境によってバグって表示されるらしい。注意しなくちゃいけない点としてはafterの要素にも同じことが起きるよ、ってこと。

<div class="flex">
    <div class="image"></div>
    <div class="content"></div>
    ::after　　　　　　　　　　　　　　　←このパターンもダメっぽい
</div>

もしやるとしたら、こう

<div class="flex"> 
    <div class="image"></div>
    <div class="content">　　　← position: relative;
   　　<span class="icon"></div>　　　　← position: absolute;
    </div>
</div>

absoluteにしたい要素をdivで囲んでabsoluteの要素をflexの孫にする。