プログラミング

flex-direction: column;を指定したときに子要素に画像があるとIEでは余白ができてしまう【CSS】

flex-directionプロパティでcolumnやcolumn-reverseを指定した子要素に画像があると、IEでは画像の下に余白ができてしまいます。

HTML
<div class=”container”>
　<div class=”box”>
　　<img src=””>
　</div>
</div>
CSS
.container {
　display: flex;
　flex-direction: column;
　width: 400px;
}
.box {
　width: 100%;
　background: #f5f5f5;
　margin-bottom: 2rem;
}
img {
　width: 100%;
　height: auto;
　vertical-align: bottom;
}

「min-height: 0%;」を指定すればいい

この問題は、子要素にmin-height: 0%;を指定することで解決できます。

CSS
.container {
　display: flex;
　flex-direction: column;
　width: 400px;
}
.box {
　width: 100%;
　background: #f5f5f5;
　margin-bottom: 2rem;
　min-height: 0%;
}
img {
　width: 100%;
　height: auto;
　vertical-align: bottom;
}

ここでは、boxクラスのdiv要素にmin-heightを指定します。

ちなみに画像にvertical-aling: bottom;も指定していないと、余分なスペースが画像下にできてしまいます。

関連記事
画像の下に謎の余白ができてしまうのを解決する方法【CSS】

Leave a Comment