More than 5 years have passed since last update.

このなかにabsoluteなflexをするとwidthが取得できないブラウザがいます〜

Posted at 2015-07-22

HTMLがこうで、

<div class="flex">
    <div>LOREM</div>
    <div>IPSUM</div>
</div>

CSSはこう。

.flex{
    position:absolute;
    display:flex;
    width:100%;
}
.flex>div{
    flex:1;
    border:1px solid red;
}

IE11だけflexがwidthを見失ってます。absoluteじゃなければうまくいくみたいだし、ChromeやFirefoxは問題ない。IE11で見た時にグシャーなっててびっくり。

解決法は、absoluteなflexに、width:100%とwidthを明記するだけでした。