【CSS】IEでflexとflex-directionを使った際に出現する謎の余白の対処法

現場でflexとflex-dicrection: columnを使った際に出現した謎の余白の対処方法をメモしておく

結論は、flex-directionを指定した子要素にline-height:0%を設定すればOKだ。

HTML

<section>
  <h2>title</h2>
  <div class="inner">
    <div class="left">
      <figure>
        <img src="sampple.jpg" alt="">
      </figure>
      <div>
        <p class="name">name</p>
        <p class="text">text</p>
      </div>
    </div>
  </div>
</section>

CSS

.inner {
    display: flex;
    flex-direction: column;
}
 .left,.right {
    line-height: 0%;//これを指定すると謎の余白を消すことができる
}
 .left {
    width: 150px;
}
 .right {
    width: calc(100% - 160px);
}