Parent box not wrapping in IE only

Question

I have this fiddle here: https://jsfiddle.net/kimwild/mtxgtwr5/2/

main#wrapper {
  z-index: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: red !important;
  border: 10px dotted #4D37DB;
}

figure#about-img {
  width: 100%;
  border-bottom: 1px solid #000000;
  overflow: hidden;
}

article#main {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  background-color: green;
}

<main id="wrapper">
  <figure id="about-img"> <img src="http://www.hauppauge.co/pics/aboutus.jpg" alt="About Us" /> </figure>
  <article id="main">
  </article>
</main>

Just for the sake of this test I added a bright background and border. It is supposed to look like it does in all other browsers such as Chrome: https://jsfiddle.net/kimwild/mtxgtwr5/2/show/

But when viewed in IE something is happening to main#wrapper where you don't see it fully, the red background is not showing up.

Really appreciate any suggestions. Thank You!

Answer 1

This has to do with Internet Explorer not fully supporting the <main> element yet.

A quick fix would be to add

main {
  display: block;
}

to your CSS.

For more information, please check out this question.