注)本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題(Safari) Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定(デフォ値なので、指定がなければそのままでOK) Safari10にて修正済み(つまり、SierraとiOS 10以降では対応不要) 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
![flexboxのバグに立ち向かう(flexboxバグまとめ) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/623500e0a0a24b6565c199ab23d777903832979f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9ZmxleGJveCVFMyU4MSVBRSVFMyU4MyU5MCVFMyU4MiVCMCVFMyU4MSVBQiVFNyVBQiU4QiVFMyU4MSVBMSVFNSU5MCU5MSVFMyU4MSU4QiVFMyU4MSU4NiVFRiVCQyU4OGZsZXhib3glRTMlODMlOTAlRTMlODIlQjAlRTMlODElQkUlRTMlODElQTglRTMlODIlODElRUYlQkMlODkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTk0NTE3NzkzYmI0YWM2ZmY3NWNmOTFhNjZiZmU5YjAz%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoYXNocm9jayZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Zjc2NTI1MmNhNTEwY2Y3NWJhYjhiYzBiM2IxN2Y3Njc%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db3325cd2ebb2e50fd388718bbfd0d55d)