flexアイテムをabsoluteした時のIE11さんの話

こんにちわ、ななきです。

最近何気なくflexアイテムをposition:absoluteしてはIEが変な動きをしてくれるのですが、
調べても同じような条件現象が起こってる方がいなかったので簡単にメモしておきます

justify-contentの計算が少しおかしいぽい?

下記のようなときにIEでabsoluteしている要素も含めてjustify-contentの計算をしてしまうというものでした。

普通に考えると2つ目の.flex__itemが右側に来ると思うんですけどIEでだけは右側に._absoluteの要素がいる体で計算されるので、2つめの.flex__itemが真ん中に来てしまいます。

まじで謎ですね。

表示上は._absoluteleft: 50%;の位置にいるんですけどね。

対策としては._absoluteをflexコンテナの外に出して、flexアイテムはflexで制御する要素だけを配置する構造にすることで解決出来ます。

そんな感じでバグに出会ったよっていうメモでした。

Archives

MasatoChiba
Frontend Developer