文本未在 flex IE10 中换行答案

【问题标题】：Text not wrapping in flex IE10文本未在 flex IE10 中换行
【发布时间】：2016-02-17 16:59:41
【问题描述】：

.c-container {
  background-color: coral;
  display: flex;
  margin: 0 auto;
  width: 90%;
}

.c-column {
  position: relative;
}
.c-column--left, .c-column--right {
  flex: 0 0 auto;
  width: 344px;
  max-width: 344px;
  min-width: 344px;
}
.c-column--left {
  order: -1;
}
.c-column--center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: #ff5213;
}

.c-topic__header, .c-topic__footer {
  padding: 24px;
  background-color: #e93f00;
}
.c-topic__body {
  position: relative;
}

.c-message {
  padding: 24px;
  position: relative;
}
.c-message__list {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  list-style: none;
}
.c-message__item {
  background-color: skyblue;
  border-radius: 3px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  padding: 24px;
  min-width: 0%;
  margin-bottom: 5px;
  flex: 1 1 auto;
}
.c-message__item--right {
  align-self: flex-end;
  margin-left: 10%;
}
.c-message__item--left {
  align-self: flex-start;
  margin-right: 10%;
}

.o-box {
  padding: 24px;
}

.u-relative {
  position: relative;
}

<div class='c-container'>
  <div class='c-column c-column--center'>
    <div class='c-topic__header'>
      Header: flex-child
    </div>
    <div class='c-topic__body'>
      <div class='c-message'>
          <ul class='c-message__list'>
            <li class='c-message__item c-message__item--right'>
              Hi, I'm a message placed on the right side and I'm quite wide
            </li> 
            <li class='c-message__item c-message__item--left'>
              How swell. I'm on the left and a bit shorter.
            </li>
          </ul>
        </div>
    </div>
    <div class='c-topic__footer'>
      Footer: flex-child
    </div>
  </div>
  <div class='c-column c-column--left'>
    <div class='o-box u-relative'>
      <span>Left column: 344px</span>
    </div>
  </div>
  <div class='c-column c-column--right'>
  <div class='o-box u-relative'>
    <span>Right Column: 344px</span>
    </div>
  </div>
</div>

最近我一直致力于将 flexbox 实现到 webapp 界面中。一页由三列组成，左右列宽度固定，中间灵活。

中间的列依次由 3 个弯曲的孩子组成。固定高度的页眉和页脚，具有灵活的中心。如果它包含的内容溢出，则此列中心（因此 CC）会获得一个垂直滚动条。

在 CC 内部，有一个带有填充的包装器。这是因为 javascript 不能很好地处理滚动，因为 CC 项本身有填充。

问题在于，在 IE10 中，当视口变小时，蓝色块内的文本不会换行。 Safari、Chrome 和 Firefox 都没有这个问题。有谁知道如何让 IE10 表现得像其他人一样？

可以在此处找到问题的示例： http://codepen.io/csssavvy/pen/qOgjmN

Tl;博士。 IE10 flexbox 文本溢出不起作用。需要帮忙。代码示例：http://codepen.io/csssavvy/pen/qOgjmN

【问题讨论】：

欢迎阅读 :) 以防万一您还没有阅读：flexbugs
作为@FelipeAls 的补充，您应该阅读以下内容：caniuse.com/#feat=flexbox。 IE10 有部分支持，并且有几个错误。但是，您应该更新您的 IE，因为 IE10 是一个使用配额很小的错误软件。微软将在 2016 年 1 月终止 IE9/10
感谢您的回答。今天下午修复了这个问题：设置最大宽度：90%；在 .c-message__item 上。移除最小宽度：0%；来自同一个项目。最后将 min-width: 0% 添加到 .c-column--center 中。更新版本见 codepen：codepen.io/csssavvy/pen/qOgjmN
你也许可以打补丁来“修复”这个问题，但更大的问题是IE10不支持current flexbox spec。 IE10 基于以前的（“tweener”）版本的 flexbox，需要前缀才能正常工作。见here 和here。

标签： css flexbox internet-explorer-10

【解决方案1】：

感谢您的回答。今天下午修复了这个问题：

.c-message__item 的变化：添加max-width: 90%; 删除min-width: 0%;。

.c-column--center 的变化：添加min-width: 0%;

查看更新版本的codepen：codepen.io/csssavvy/pen/qOgjmN

【讨论】：