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

【问题标题】：In IE11 a flexbox div doesn't respect the container, and text go overflow, in one line, instead of wrap [duplicate]在 IE11 中，flexbox div 不尊重容器，并且文本在一行中溢出，而不是换行 [重复]
【发布时间】：2019-07-16 06:47:02
【问题描述】：

我的下面的代码在 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>

【问题讨论】：

添加width: 100%到包装器/容器
“.container”，有一个可变宽度，它有一个从媒体查询到媒体查询变化的最大宽度，并在页面中居中元素；添加 100% 如何解决问题并保持元素居中？
IE 就是那样有趣 ;)

标签： css internet-explorer flexbox

【解决方案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

【讨论】：