<div>
Thanks David. &nbsp;I'll try to replicate it as a simpler example. &nbsp; Making it display: block would upset all the flex children but not sure how many are needed at those widths anyway.<br />
<br />
Cheers
</div>


Thanks David.  I'll try to replicate it as a simpler example.   Making it display: block would upset all the flex children but not sure how many are needed at those widths anyway.

Cheers

<div>
Display: block for &lt;main&gt; works fine.<br />
<br />
I have spotted another issue which seems to have been reported as a bug so I will need a solution for this too. &nbsp;I'll ask a new question.
</div>


Display: block for <main> works fine.

I have spotted another issue which seems to have been reported as a bug so I will need a solution for this too.  I'll ask a new question.

<div>
<div class="content wysiwyg-content">
<a href="http://www.col-b.uk/FOBG/?page=hall" rel="ugc">http://www.col-b.uk/FOBG/?page=hall</a> &nbsp; <b>Screen width c. 750px.</b><br />
<br />
The &lt;main&gt; tag is exceeding the desired width in IE11 when viewed with screen just less than 800px wide. &nbsp; It renders fine in Chrome and Firefox.<br />
<br />
I have done a lot of searching and apparently the &lt;main&gt; tag isn't fully supported in IE11 but making it a div doesn't work in this case, so I think it must be to do with my flex values.<br />
<br />
Any help appreciated.<br />
<br />
In the screenshot, IE11 to the left, Chrome on the right.<br />
<a href="https://filedb.experts-exchange.com/incoming/2017/02_w08/1146388/Capture.JPG" target="_blank" title="IE11 left, Chrome right. (127 KB)"><img alt="IE11 left, Chrome right." class="file-block lazyload" style="max-width: 800px;" data-src="https://filedb.experts-exchange.com/incoming/2017/02_w08/800_1146388/Capture.JPG" /></a>
</div>
</div>


Capture.JPG

http://www.col-b.uk/FOBG/?page=hall   Screen width c. 750px.

The <main> tag is exceeding the desired width in IE11 when viewed with screen just less than 800px wide.   It renders fine in Chrome and Firefox.

I have done a lot of searching and apparently the <main> tag isn't fully supported in IE11 but making it a div doesn't work in this case, so I think it must be to do with my flex values.

Any help appreciated.

In the screenshot, IE11 to the left, Chrome on the right.


Flex container exceeding stated width in IE11

CSS flex

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.