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

Question

I have he code below that works correctly in Chrome/Firefox but in IE11 a the card flexbox div doesn't respect the container, and text go overflow, in one line, instead of wrap

.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;
}

.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>

the ".container", has a variable width, it has a max-width that varies form media query to media query, and center the element in page; how adding 100% fix the issue and keep the elements centered ? — user3541631, Feb 22 '19 at 08:11

score 2 · Accepted Answer · answered Feb 22 '19 at 08:11

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>

Working fiddle

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

1 Answers1