Text in a Flex Container Doesn't Wrap in Ie11

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>

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.

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>

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>

In IE11 a flexbox div doesn't respect the container, and text go overflow, in one line, instead of wrap

Add width: 100%; to the wrapper. In this example the .left class

.container {    display: -ms-flexbox;    display: flex;    -ms-flex-pack: start;    -ms-flex-direction: row;    flex-direction: row;    margin: 3rem auto 0;    -ms-flex-positive: 1;    flex-grow: 1;    margin-right: auto;    margin-left: auto;    max-width: 20.25rem;    border: 1px solid red;}
.left {  flex: 1 1 auto;  width: 100%; /* IE Fix */}
.card {  display:flex;  align-items:stretch;  justify-content:flex-start;  border: 1px solid black;}


.card-image{  align-self:center;  width: 5rem;}
.card-image img { max-width: 100%;}
.card-content { padding:1rem;}
.right {  display:flex;  flex: 0 0 4.75rem;  align-items: flex-end;  flex-flow: column nowrap;}

<div class="container">  <div class="left">    <div class="card">      <div class="card-image">        <img src="https://via.placeholder.com/100x100">      </div>      <div class="card-content">      <h2>Lorem Technology Corporation</h2>       <p class="card-text">       book. It has survived not only five centuries, but also the  leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p></div></div></div>                                                           <div class="right">  <img src="https://via.placeholder.com/50x600"></div></div>

Text not wrapping in IE when container has flex-flow:column

IE 10 and 11, which support flexbox, have many related bugs nonetheless.

In this particular case, IE is not recognizing the inherent width or display value of .container.

Here's a fix:

.wrapper {  clear: both;  float: left;  max-width: 1000px;  margin-top: 20px;  display: flex;        /* NEW */}
.container {  display: flex;  flex-flow: column;  width: 100%;          /* NEW */  border: 1px solid red;}
.container p {  max-width: 100%;  border: 1px dashed black;}

<div class='wrapper'>  <div class='container'>    <p>      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit nulla id odio tincidunt, in rutrum diam dapibus. Mauris et urna luctus turpis sollicitudin dictum venenatis eget massa. Suspendisse maximus lectus in nunc placerat, nec interdum      massa iaculis. Nullam sit amet ex feugiat, cursus enim non, viverra lectus. Curabitur blandit risus sed dolor viverra, sit amet auctor metus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus      placerat sollicitudin ligula, convallis mattis leo porttitor vitae. Praesent id metus id erat condimentum porta. Phasellus a sapien vel lacus imperdiet pellentesque sed at risus. Curabitur venenatis scelerisque augue, quis congue lorem feugiat eu.      Suspendisse placerat elit non augue suscipit pretium.    </p>    <br>    <p>      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit nulla id odio tincidunt, in rutrum diam dapibus. Mauris et urna luctus turpis sollicitudin dictum venenatis eget massa. Suspendisse maximus lectus in nunc placerat, nec interdum      massa iaculis. Nullam sit amet ex feugiat, cursus enim non, viverra lectus. Curabitur blandit risus sed dolor viverra, sit amet auctor metus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus      placerat sollicitudin ligula, convallis mattis leo porttitor vitae. Praesent id metus id erat condimentum porta. Phasellus a sapien vel lacus imperdiet pellentesque sed at risus. Curabitur venenatis scelerisque augue, quis congue lorem feugiat eu.      Suspendisse placerat elit non augue suscipit pretium.    </p>  </div></div>

Text in a Flex Container Doesn't Wrap in Ie11