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

Question

<分区>

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