html - flexible - El texto no se ajusta en IE 10 al usar flexbox

flexible box layout module

Question

He intentado casi todas las soluciones que pude encontrar buscando en Google.

Esto incluye establecer max-width al 100%, configurar el elemento principal para que se display como block o flex , establecer white-space en white-space en normal y jugar con overflow pero nada parece funcionar en mi caso.

De todos modos, esto es lo que debería ser (y realmente se ve en IE 11, Firefox y Chrome):

y en IE 10 se ve así:

.

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>

Answer 1

Hola, en este caso prefiero cambiar la flexión en la clase .flexContainer

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

Agregar al siguiente archivo de proyecto también puede ayudarlo en esta situación

Normalizar css

Saludos :)

Answer 2

La fuente del problema es el elemento main en tu HTML.

Este elemento se introdujo en HTML5 y no es reconocido por IE10.

Como main no es compatible con IE10, lo que significa que no existe en la hoja de estilo predeterminada del navegador, el elemento asume las propiedades iniciales tal como se define en la especificación .

Como resultado, el main en su diseño es display: inline . (Verifique las herramientas de desarrollo y verá que no tiene ancho y no está envolviendo nada. Es solo una pequeña especificación).

Con el siguiente ajuste, main debería funcionar en IE10, permitiendo que el texto se ajuste:

main {
   display: block;
}

Tenga en cuenta que el elemento main es único porque otros elementos HTML5, como article , section , header y figcaption (que también están en su código) funcionan bien en IE10 (e incluso en IE9). Por alguna razón, IE salió de la casa main en el frío. Ver el enlace caniuse a continuación para más detalles.

Más información:

• Configuración predeterminada de elementos HTML no reconocidos
• El elemento <main> no funciona en Internet Explorer 11
• 9.2.4 La propiedad de display
• soporte del navegador del elemento main en caniuse.com