CSS wrap text not working in IE

Question

I ran into some problems with some styles that work fine in both Chrome and Firefox, but they are not in IE.

The problem I came up with is basically that a certain style applies perfectly in Chrome, but it is not in IE. Text does not fit in a column.

How to play it? Take a look at this script first in Chrome or Firefox, and then do it in IE.

To make things easier, try right here:

.Container { display: flex; text-align: center; } .column { flex-direction: column; } .row { flex-direction: row; } .jc-center { justify-content: center; } .column-item-x2 { width: 50%; } .jc-start { justify-content: flex-start; } .resume-item { padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 7px; display: inline-block; position: relative; font-size: medium; right: 15px; } .dot { position: relative; display: inline-block; align-self: center; border-radius: 10px; height: 12px; width: 12px; right: 37px; } .dot-skill { display: inline-block; align-self: center; border-radius: 15px; margin-right: 3px; height: 15px; width: 15px; } .skill { margin-right: 5px; margin-bottom: 5px; } 

 <div id="resume" class="Container column" style=" margin-top: 50px;"> <span style="textAlign: left; fontSize: 40px; color: red;"> <input type="checkbox" id="Resume-chk" style="display: none;" /> <b id="Resume-title">RESUME</b> </span> <hr /> <div class="Container row jc-center" style="margin-top: 30px;"> <div class="Container column jc-start column-item-x2" id="professional" style="color: red;"> <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;"> <div style="text-align: left;"> <h2 style="color: red;">PROFESSIONAL</h2> <div class="Container column"> <div class="Container row"> <div class="dot" style="background-color: red;"></div> <div style={{ position: "relative" }}> <span class="resume-item" style="color: white; background-color: red;"><b>Nov 2016 - Present</b></span> </div> </div> <div style="text-align: left;"> <h3>Web.com</h3> <p style="color: gray;"> <span> Actualmente trabajo como Engineer III Fullstack .NET en Web.com, una compañía con fuerte posición en el mercado norteamericano de eCommerce. <br /> Realizo mantenimiento y nuevos desarrollos tanto back-end como front-end del portal de ticketing de la compañía. </span> </p> </div> </div> </div> </div> </div> <div class="Container column jc-start column-item-x2" id="personal" style="color: red;"> <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px"> <div style="text-align: left;"> <h2 style="color: red;">SKILLS</h2> <div class="Container column"> <div> <div class="Container row"> <div class="dot" style="background-color: red;" /> <div style="position: relative;"> <span class="resume-item" style="padding-left: 3px; padding-bottom: 6px; text-align: left; color: red;"><b>C#</b></span> </div> </div> <div class="Container row" style="margin-bottom: 20px;"> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: red;" /> <div class="dot-skill" style="background-color: #B4B2B2;" /> </div> </div> </div> </div> </div> <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;"> <div style="text-align: left;" }}> <h3 style="color: red;">OTHER_SKILLS</h3> <div class="Container row" style="margin-left: 15px; flex-wrap: wrap;" }}> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">TDD</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Scrum</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">MongoDB</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ElasticSearch</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Flux</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Firebase</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">.Net MVC 5</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">REST Services</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">SOA</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">OAuth</span> <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ExpressJS</span> </div> </div> </div> </div> </div> </div> 

Thank you very much.

Answer 1

IE has a packaging problem in flexbox.

A normal correction is to determine the width of the container.

What is not always clear: which container?

In this case, these settings seem to work:

 #professional > .row > div { width: 100%; } #personal .row .row .row > div { width: 100%; } 

revised script

Related: Why doesn't IE11 wrap text in flexbox?

Answer 2

try:

 -ms-flex-wrap: wrap; flex-wrap: wrap;