flexboxのバグに立ち向かう（flexboxバグまとめ）

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/fc70c15a-8c11-3d2c-7a85-442e1381d51e.png)

flexbox使ってますか？バグつらいですね。必死に組んだレイアウトがIE11で崩れる様を見て、膝から崩れ落ちたことは何度もあります。

[Solved by Flexbox](https://github.com/philipwalton/solved-by-flexbox/)の作者でもある、philipwaltonさんの[flexbugs](https://github.com/philipwalton/flexbugs)という素晴らしいflexboxのバグまとめがあるんですが、いかんせん分量が多くて読むのが辛いです。

そこで、今回はflexbugsに上がっているバグのスクショを一覧にしました（flexbugsはMITライセンス）。実際にバグってる表示と見比べることで、どのバグを食らっているのか、手がかりになるのではないでしょうか。

詳しい解説については、本家で見てください。また、IE10のみで起こるバグについては省略していますので、不幸にも対応の必要がある方はやっぱり本家を見てください。issue上の議論も参考になるでしょう。かなり雑に意訳してますので、趣旨が変わってしまっている項目とかあればご指摘ください。

本家： https://github.com/philipwalton/flexbugs

# 一覧

| ブラウザ             | 状況                                                   | 関係する要素/プロパティ             |
|----------------------|--------------------------------------------------------|-------------------------------------|
| Safari               | [アイテムが潰れた](#1-%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E6%BD%B0%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8Csafari)                                       | flex-shrink未指定                   |
| IE11                 | [アイテムがコンテナをはみ出す](#2-align-itemscenter-%E3%81%AF%E3%81%BF%E5%87%BA%E3%81%99%E5%95%8F%E9%A1%8C)                           | align-items                         |
| IE11                 | [アイテムが潰れた / min-height, min-widthが効かない](#3-min-height%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C)         | min-height, min-width               |
| IE11                 | [アイテムがbasisに従わない](#4-flex-1-0-0%E3%81%A8%E3%81%8B%E3%82%84%E3%82%8B%E3%81%A8flex-basis%E3%81%8C%E7%84%A1%E8%A6%96%E3%81%95%E3%82%8C%E3%82%8B)                              | flexショートハンド                  |
| IE11                 | [imgが歪む](#5-img%E3%81%AE%E3%82%A2%E3%82%B9%E3%83%9A%E3%82%AF%E3%83%88%E6%AF%94%E3%81%8C%E7%B6%AD%E6%8C%81%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84)                                              | imgをflexアイテム指定               |
| IE11                 | [アイテムがコンテナをはみ出す](#7-flex-basis%E3%81%8Cborder-box%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84)                           | flexショートハンド, border, padding |
| IE11                 | [calcが効かない](#8-flex%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%81%A7%E3%81%AEflex-basis%E6%8C%87%E5%AE%9A%E3%81%8Ccalc%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84)                                         | flexショートハンド                  |
| Edge / FF / Safari   | [button要素などにdisplay:flexが効かない](#9-button%E3%82%84fieldset%E3%82%92flex%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%AB%E3%81%97%E3%81%9F%E3%82%89%E5%B4%A9%E3%82%8C%E3%81%9F)                             | button, fieldset                    |
| FF                   | [align-itemsが効かない](#10-align-items-baseline%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84firefox)                                  | align-items                         |
| Safari               | [min-height, max-height, min-width, max-widthが効かない](#11-max-min%E3%82%B5%E3%82%A4%E3%82%BA%E6%8C%87%E5%AE%9A%E3%81%8Cflex-wrap%E6%8C%87%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E6%99%82%E3%81%AB%E7%84%A1%E8%A6%96%E3%81%95%E3%82%8C%E3%82%8Bsafari) | flex-wrap                           |
| Chrome / Safari / FF | [アイテムがコンテナをはみ出す](#14-wrap%E6%8C%87%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%9Fflex%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%8C%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%9F%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84)                           | flex-wrap                           |


# 注）本文中の「コンテナ」「アイテム」について

![スクリーンショット 2016-08-14 15.27.53.png](https://qiita-image-store.s3.amazonaws.com/0/32596/7a77cc8c-d82b-fec9-6fe2-c92d4e4c8476.png)

本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。

 * コンテナ
  * display: flexや、wrap指定などをする
  * 複数のアイテムを含む
 * アイテム
  * flex: 1 0 0%などの指定をする


# 1. アイテム潰れる問題（Safari）

Chrome

![スクリーンショット 2016-08-14 15.08.00.png](https://qiita-image-store.s3.amazonaws.com/0/32596/a1286174-e63a-ac17-e976-db9304e30f24.png)

Safari

![スクリーンショット 2016-08-14 15.08.40.png](https://qiita-image-store.s3.amazonaws.com/0/32596/1a1869e8-9a40-6129-764a-19fa31834ac6.png)

潰れてますね。

## 起きる条件

 * Safari

## なぜ

 * コンテンツの最小サイズを尊重してくれない模様

## どうすればいいのか

 * flex-shrinkに0を指定
 * flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK）
 * Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要）


# 2. align-items:center はみ出す問題

Chrome

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/e048840a-f9db-d5bc-d611-11ac0502266b.png)

IE11

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/1ce8182b-dbde-06d0-0bb2-67374c18a8ab.png)

はみ出てますね。

## 起きる条件

 * IE10-11
 * flex-direction: column
 * アイテムにalign-items:centerが設定されている

## どうすればいいのか

 * アイテムにmax-width:100%を設定する
 * アイテムにborderやpaddingが設定されている時、box-sizing:border-boxになっているか確認が必要
 * アイテムにmarginが設定されている時は上記の対処ではダメかも、padding使ったコンテナ要素を使ってください

# 3. min-height効かない問題

Chrome

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/61ec0230-e226-ed50-fac4-7672a751c5a9.png)

IE11

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/20c121cb-214c-3f74-f7d1-e8a2deb7259f.png)

body部分が潰れて、footerが重なってしまっている。


## 起きる条件

 * IE10-11
 * アイテムで min-height:100% とかやってる

## なぜ

 * どうやらアイテムがコンテナの高さを知らない模様

## どうすればいいのか

 * min-heightが必須でなければ、代わりにheightを使う
 * min-heightが必須の場合、コンテナにラッパー要素を追加する。いろんな理由により、ネストされたflexコンテナはバグの影響を受けない

# 4. flex: 1 0 0とかやると、flex-basisが無視される

Chrome

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/d72deba0-125a-ce31-32a8-03c84b3557bc.png)

IE11

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/6af11ff8-c546-c30f-406e-090799f9a585.png)

## 起きる条件

 * IE10-11
 * flex: 1 0 0の一番最後がflex-basisだけど、単位を付けないと無視されてしまう

## なぜ

 * 2012年の時点では、flex-basisの単位を省略出来なかったので無視する仕様だった。IE11はまだその仕様に従っている

## どうすればいいのか

 * flex: 1 0 0%のように単位を付けるだけ。
 * flexbugsのメンテナは「0pxを0に変換するCSSミニファイアとかあるから、%の方がいい」と言っている

# 5. imgのアスペクト比が維持されない

Chrome

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/74802d9b-5834-e7a5-074d-6b587115995c.png)

IE11

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/a27abab7-3deb-e812-cd2a-84c17ed917fc.png)

800x200となっているのは画像です。imgがflexアイテムなんだけどIE11だとぐちゃっとなる。

## 起きる条件

 * IE10-11
 * imgに限らず起こるはずですが、たいていimgでしょう（筆者私見）。canvasとかでも起こるかも？

## なぜ

 * 固有のアスペクト比を持っている要素は、比を保ったまま拡大されるべきだが、IEはそうなっていない。

## どうすればいいのか

 * img要素をflexアイテムにしない。img要素の上にコンテナ要素を作り、その中に入れる。

# 7. flex-basisがborder-boxに対応してない

Chrome

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/2c27839e-15aa-e60d-7321-98bad840a206.png)

IE10-11

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/d26803d2-b592-4c80-4558-ba194874231c.png)

borderとpadding分はみ出してしまっている。

## 起きる条件

 * IE10-11（いちいち書く意味が無いかもしれない）

## なぜ

 * flex-basisってauto以外の指定があると、widthやheightのように動作するんだけど、border-box指定しててもborderやpadding分を計算に入れてくれない模様

## どうすればいいのか

 * flex-basisに100%指定してる場合、flex-basisはautoにして、単にwidthやheightで100%指定すればよい。
 * または、paddingやborderを使っていないラッパー要素を作る。

# 8. flexショートハンドでのflex-basis指定がcalcに対応してない

これはスクショはいらないですよね…

## 起きる条件

 * IE10-11
 * flex:0 0 calc(100%/3)とかやると動かない
 * なおIE10はロングハンドにも対応してない

## どうすればいいのか

 * 面倒だけどflex-basis（ロングハンド）で指定しましょう

# 9. buttonやfieldsetをflexコンテナにしたら崩れた

Chrome

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/48687301-5af2-68cb-f9f8-11aff8c005f0.png)

Firefox 48.0

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/79110423-3445-1b8f-9bd5-e4c712cea8ff.png)


## 起きる条件

 * Edge / FF / Safari
 * 例えばbuttonをflexコンテナにする。スクショのような用途でやりがちですね。
 * なんとIEではちゃんとレンダリング出来ます

## なぜ

 * button, fieldsetのような要素のブラウザ標準レンダラがflex定義と衝突している模様

## どうすればいいのか

 * divのようなラッパー要素をbutton, fieldset内に入れればOK

# 10. align-items: baselineが効かない（Firefox）

Chrome

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/5f21f64a-67d2-fee8-0251-82608899fd43.png)

Firefox

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/93492f27-bfa4-cc3e-a920-e1b65dac1ab6.png)

## 起きる条件

 * FireFox
 * flexコンテナをネストさせている

## どうすればいいのか

 * display: flexの代わりに、display: inline-flexを使うといいらしい。同時にwidth: 100%を指定する必要がある。

# 11. max, minサイズ指定がflex-wrap指定されている時に無視される(Safari)

Chrome

![スクリーンショット 2016-08-14 15.18.51.png](https://qiita-image-store.s3.amazonaws.com/0/32596/1ddc30ff-6412-cd3c-1730-1b55ff5326a1.png)

Safari

![スクリーンショット 2016-08-14 15.19.18.png](https://qiita-image-store.s3.amazonaws.com/0/32596/2ec220a6-ec9b-939a-21f8-212b4fc660b3.png)

## 起きる条件

 * Safari
 * 例えば、アイテムのmin-width指定とコンテナのwrap指定を同時に使っている

## どうすればいいのか

 * flex-basisを指定するしかないらしい
 * 例えば、min-width:200pxなら flex: 1 0 200pxのようにflex-basisを同時指定する

# 12. インライン要素がflexアイテムとして扱われない

IE11で試したけど、正常にレンダリングされているような…

# 14. wrap指定されたflexコンテナが、アイテムに応じたサイズにならない

IE11

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/f080200c-2c44-58e1-1193-38a17e233f3b.png)

Chrome

![image](https://qiita-image-store.s3.amazonaws.com/0/32596/73c05c81-ebee-8b5f-5227-6055742a9ae5.png)

## 起きる条件

 * Chrome
 * Safari
 * Firefox

## どうすればいいのか

まだワークアラウンドはないようです。コンテナのサイズを指定してしまうぐらいしか対策がなさそう。

# まとめ

 * つらい
 * けど、見えてる地雷は大した地雷じゃない。ありがとうflexbugs
 * [IE11のサポート期限は「2025年10月」まで](http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html#win10)とみられる
 * IE11は初期からチェックしていった方がいい
 * flex-basisは罠がいっぱい
 * 最初からワークアラウンド付きの[flexbox grid](http://flexboxgrid.com/)とかbootstrapとかが参考になるかもしれない

# その他

https://github.com/luisrudge/postcss-flexbugs-fixes

postcssのflexbugs自動修正プラグインがあります。4, 6, 8は自動で直してくれますが、基本的に手で治す覚悟もまた必要でしょう。