宽度在 IE11 中不换行

Posted 2023-03-05

【中文标题】宽度在 IE11 中不换行

【英文标题】：Width not wrapping in IE11

【发布时间】：2019-06-21 09:19:23

【问题描述】：

如果 IE11 宽度不合适。在 Chrome 的情况下，宽度是合适的并且内容是被包裹的。 Chrome 没有滚动条，但在 IE11 中内容没有换行。

预期：不应该有滚动条

   .modal-scroll-panel
     position:static;
     overflow:auto;
     margin:auto;
     max-width:772px!important;
     max-height:532px!important;
    
    .width-class
      width:55%;
    
    .parent
      display:flex;
      width:100%;
      flex-flow:column wrap;
    
    .parent > .item-1
      display:flex;
      flex-direction:column;
      width:100%;
    
    .parent > .item-1 > .child-1
      flex:none;
      width :100%;
    

    <div class = "modal-scroll-panel">
      <table>
        <tbody>
          <tr>
            <td class ="width-class">
              <div class = "parent">
                <div class = "item-1">
                  <div "child-1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 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.   
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

【问题讨论】：

另一个令人惊奇的是，如果我删除与 flex 相关的 css，它就会开始工作（滚动条不存在并且内容是正确的包装器。）

想了解为什么在 flex 的情况下父 div 宽度不合适的根本原因（更多）。

display: flex not working on Internet Explorer的可能重复

@StudioKonKon，你能指出确切的问题吗？这是一个通用声明

不是直接的，display: flex; 虽然可以使用，但它在 IE11 中并不完全支持，而且在使用它的地方非常有问题。有一些解决方法，但是虽然在 IE11 中会很好，但在 Chrome 和 Firefox 上会出现问题。 IE11 没有正确设置height，如果你添加了height 属性，那么垂直对齐可能会停止工作，或者你可以设置一个固定的宽度。

【参考方案1】：

flex-wrap 不适用于 IE 上的 width: 100%。例如，如果您将其更改为 max-width:772px，它将起作用。

.parent
  display:flex;
  max-width:772px;
  flex-flow:column wrap;