IE11 width: 100% and max-width: 300px; on an element

I have an issue with the following markup/styling in IE11:

main{
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
<main><p>lorem</p></main>

The problem is that the max-width is not respected in IE11.

It works as expected in < IE11, IE11 with the new spartan engine and all other browsers.

Upvotes: 1

Views: 4031

Answers (1)

C3roe
C3roe

Reputation: 96241

IE does not yet have display:block in its browser stylesheet for the main element – adding it in your own stylesheet should fix the issue.

main {
  display:block;
  /* rest of your properties */
}

Upvotes: 2

Related Questions