Text doesn't wrap in IE 10 when using flexbox

Question

I have tried pretty much every solution I could find by Googling around.

Those include setting max-width to 100%, setting parent element to display as block or flex, setting white-space to normal, and played around with overflow but nothing seems to work in my case.

Anyway, this is what it should look like (and actually looks like in IE 11, Firefox and Chrome):

this is what it should look like

and on IE 10 it looks like this:

looks like this .

body {
  padding: 0;
  margin: 0;
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
.flexContainer {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -mox-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.flexContainer * {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 1;
  -moz-flex-shrink: 1;
  -ms-flex: 1;
  flex-shrink: 1;
  -webkit-flex-basis: auto;
  flex-basis: auto;
  width: auto;
  background-color: rgba(255, 0, 0, 0.1);
}

<div id="wrapper">
    <div class="flexContainer">
      <header>
        <img id="header-logo" src="images/black.svg" />
        <div id="hamburger-menu">
          <a href="#">&#9776;</a>
        </div>
      </header>
      <main>
        <section>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/320x150" alt="Placeholder image">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
          <article>
            <a href="#"><h2>Quisque purus lectus, posuere eget imperdiet nec sodales id arcu</h2></a>
            <a href="#">
              <img src="http://placehold.it/320x150" alt="Placeholder image">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
          <article>
            <a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
            <a href="#">
              <img src="http://placehold.it/320x150" alt="Placeholder image">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet.</figcaption>
            </a>
          </article>
        </section>
        <section>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/258x159" alt="">
            </a>
            <a href="#">
              <div class="flex-fix">
                <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
              </div>
            </a>
          </article>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/258x159" alt="">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/258x159" alt="">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/258x159" alt="">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
        </section>
      </main>
      <aside id="right" class="aside">
        <section>
          <a href="#"><h2>Section heading</h2></a>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Nam molestie nec tortor.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi.</figcaption>
              </a>
            </div>
          </article>
        </section>
        <section>
          <a href="#"><h2>Section heading</h2></a>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Nam molestie nec tortor.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi.</figcaption>
              </a>
            </div>
          </article>
        </section>
        <section>
          <a href="#"><h2>Section heading</h2></a>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Nam molestie nec tortor.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi.</figcaption>
              </a>
            </div>
          </article>
        </section>
      </aside>
      <footer "><p>footer</p></footer>
        </div>
    </div>

score 6 · Accepted Answer · edited May 23 '17 at 12:15

The source of the problem is the main element in your HTML.

This element was introduced in HTML5 and is not recognized by IE10.

Since main is not supported by IE10 – meaning it doesn't exist in the browser's default style sheet – the element assumes initial properties as defined in the spec.

As a result, main in your layout is display: inline. (Check dev tools and you'll find it has no width and is not wrapping anything. It's just a little spec.)

With the following adjustment, main should work in IE10, enabling the text to wrap:

main {
   display: block;
}

Note that the main element is unique because other HTML5 elements such as article, section, header and figcaption (which are also in your code) work fine in IE10 (and even IE9). For whatever reason, IE left main out in the cold. See the caniuse link below for more details.

More info:

jseezo · Answer 2 · 2016-10-05T09:26:32.630

0

Hi In this case I prefer change flex-direction in class .flexContainer

.flexContainer {
   -webkit-flex-direction:column;
   -ms-flex-direction: column;
   flex-direction: column;
}

Adding to the following project file can also help you in this situation

Normalize css

Regards :)

edited Oct 05 '16 at 09:26

answered Oct 05 '16 at 09:18

jseezo

462
3
4

Text doesn't wrap in IE 10 when using flexbox

2 Answers2