Question

如果IE11宽度不合适。如果使用的是Chrome，则宽度合适且内容会被包裹。如果使用Chrome，则没有滚动条，但是在IE11中，内容没有包装。

预期：不应有滚动条

<!DOCTYPE html>
<html>
<head>
<style>
.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%;
}
</style>
</head>

<body>
</body>
<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>
</html>

Answer 1

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

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

IE11中未包装的宽度

1 个答案: