在IE11中，flexbox div不尊重容器，并且文本在一行中溢出而不是换行

Question

我在下面用他的代码在Chrome / Firefox中正常工作，但是在IE11中，flexbox div卡不尊重容器，文本在一行中溢出，而不是自动换行

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

Answer 1

将width: 100%;添加到包装器中。在此示例中，.left类

.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