Ie11 Flexbox Preventing Text Wrapping

IE11 flexbox preventing text wrapping?

As far as I can tell, IE's flexbox implementation is just broken. That's the long and short answer to this question. The text should be wrapping, but it isn't. It does in Firefox and Chrome.

UPDATE:

IE11's flexbox implementation was indeed broken. This now renders properly in Edge.

Text in a flex container doesn't wrap in IE11

Add this to your code:

.child { width: 100%; }

We know that a block-level child is supposed to occupy the full width of the parent.

Chrome understands this.

IE11, for whatever reason, wants an explicit request.

Using flex-basis: 100% or flex: 1 also works.

.parent {  display: flex;  flex-direction: column;  width: 400px;  border: 1px solid red;  align-items: center;}.child {  border: 1px solid blue;  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */}

<div class="parent">  <div class="child">    Lorem Ipsum is simply dummy text of the printing and typesetting industry  </div>  <div class="child">    Lorem Ipsum is simply dummy text of the printing and typesetting industry  </div></div>

IE11 flexbox in table - text not wrapping

In HTML, there is no such thing as "a <table> with flexbox properties".

The CSS table-model as defined in CSS Level 2 specs has specific rules regarding what elements can be children of what elements and under which conditions.

In your example, you can't have display:flex elements as immediate children of display:table-row-group elements. Furthermore, if <tr> (display:table-row elements) are placed directly under a <table> element, you'll notice browsers automatically add a <tbody> (display:table-row-group) wrapper around them.

These rules are important for the table display model and how it generates column sizes. You should also note the table model is a very complex and slow model for rendering and you'll notice performance issues when dealing with more than 50 items, particularly if you're performing DOM manipulations on each cell, which is not the case of box model, flexbox model or grid layout model.

The fact that your code "works" in some browsers is irrelevant. Since your CSS rules are invalid, browsers are free to do what they consider optimal, and that differs from browser to browser, since there is no official recommendation for it.

There are several ways to fix your layout but you probably you want to remove d-flex from <tr>s and <td>s and wrap the <td> contents in a d-flex wrapper according to your needs (=> solution 1).

Also note using <table> elements for layout is generally regarded as a bad idea (=> solution 2).

Using <table>s:

body {  box-sizing: border-box;}.container {  width: 500px;  padding: .1rem 0;  margin: 0 auto;  font-size: 0.9rem;  color: #212529;  text-align: left;  list-style: none;  background-color: #fff;  background-clip: padding-box;  border: 1px solid rgba(0,0,0,.15);  border-bottom: .5rem solid #008938;  max-height: calc(100vh - 20px);  overflow-y: auto;  overflow-x: hidden;}
.text-center {    text-align: center!important;}
.d-flex {  display: flex !important;}
.flex-row {    flex-direction: row !important;}
.flex-column {    flex-direction: column !important;}
.flex-fill {    flex: 1 1 auto!important;}
.align-items-stretch {  align-items: stretch!important;}
.text-nowrap {  white-space: nowrap !important;}
.text-dark {    color: #212529 !important;}
.text-muted {    color: #bbbbbb;    text-shadow: none;    background-color: transparent;    border: 0;}
img {    padding-top: .75rem;    padding-bottom: .75rem;    color: #6c757d;    text-align: left;    caption-side: bottom;}td {  position: relative;}a {  text-decoration: none;}td > a > * {  flex-grow: 0;}td > a > .flex-fill {  flex-grow: 1;}
table {  width: 100%;  border-collapse: collapse;  table-layout: fixed;}td {  width: 33.33%;  vertical-align: top;  }

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><div class='container'>    <table>      <tr>        <td>          <a href="#" class="d-flex flex-column text-center">            <div>              <img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">            </div>            <div class="flex-fill">              <strong class="text-dark">Normal title</strong>            </div>            <div>              <span class="text-muted text-nowrap">Valid from date to date</span>            </div>          </a>        </td>        <td>          <a href="#" class="d-flex flex-column text-center">            <div>              <img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">            </div>            <div class="flex-fill">              <strong class="text-dark">                Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf              </strong>            </div>            <div>              <span class="text-muted text-nowrap">Valid from date to date</span>            </div>          </a>        </td>        <td>          <a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">            <div>              <img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">            </div>            <div class="flex-fill align-self-stretch">              <strong class="text-dark">Long title that is supposed to span 2 lines</strong>            </div>            <div>              <span class="text-muted text-nowrap">Valid from date to date</span>            </div>          </a>        </td>      </tr>    </table>  </div></body></html>

flexbox text wrap on Internet Explorer 11 (IE11)

You're running up against a couple of problems involving flex and/or IE11.

Try this:

.container-1 {  display: flex;  justify-content: flex-end;  border: 1px solid red;}
.fix {  display: flex;}
.container-2 {  width: 100%;  display: flex;  flex-direction: column;  text-align: center;  border: 1px solid blue;}

<div class='container-1'>  <div class='fix'>    <div class='container-2'>      <p>Center Aligned Content</p>      <p>Some content goes here. Some content goes here. Some content goes here. </p>    </div>  </div></div>

CSS wrap text not working in IE

IE has a problem with wrapping in flexbox.

The normal fix is to define a width for the container.

What is not always clear is: which container?

In this case, these adjustments seem to work:

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

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

revised fiddle

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

Flex-wrap does not wrap items in IE11

You could refer to this code sample. The image is original size at first and the left and right parts are of the same width. It works well in IE 11 :

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 200px;
}

.d1 .text {
  flex: 1;
  padding: 2%;
}

/* adjustment */
img {
  width: 100%;
  height: auto;
  max-width: 300px;
}

<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Ie11 Flexbox Preventing Text Wrapping