今回起きた事象

最近はflex-boxをよく使うようになりました。flexアイテムにはいろいろなプロパティがあってとても便利ですよね。

その中で今回ハマってしまったのが「flex-direction: column;」です。

このプロパティは、flex-boxのアイテムを、通常の横並びとは違って、縦並びにすることができます。レスポンシブサイトの場合に使う場面が多いかと思います。

IEでの崩れ方

「flex-direction: column;」の中のアイテムが間延びしてしまうという現象が起こりました。

これはよくある話で、調べたらすぐに解決策が出てきました。その方法は、flexをかけた子要素に「min-height: 0%;」を適用させるというものです。

参考記事を念のためリンク貼っておきます。　こちら

なぜか「0%」が「0px」に！

本来は上記の方法で対応できるのですが、思わぬ現象が起こりました。

確実にCSSは「min-height: 0%;」と記述しているのに「%」が「px」に変わってしまっていました。

調べたのですが同じような現象が起こっているというような記事は見受けられませんでした。なにか原因がわかる方いらっしゃいましたらご連絡いただけると嬉しく思います。

応急処置

どうにもこうにも、勝手に「0px」になってしまう現象は改善することができなかったので、とりあえず「min-height: 1%」としました。

今回の場面では特に支障が出ませんでしたが、0%ではないといけない理由がある場合はこの方法は使えないかもしれません。

同じようなことが起こった時にまた悩んでしまいそうなので記事に残しておきます。

求：原因！

この事象が起きてから原因が分からずずっとモヤモヤしているので、お詳しい方いらっしゃいましたらこちらのコンタクトフォームからご連絡頂けると幸いです。よろしくお願い致します。