Question

我试图用flexbox做简单的网格。看看https://jsfiddle.net/j3w795qo/3/

此示例在Chrome，FF，Edge中正常工作，但在IE11中没有：

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  border: solid 1px red;
  display: flex;
  flex-direction: row;
}

.column {
  border: solid 1px blue;
  display: flex;
  flex-direction: column;
}

.column>* {
  max-width: 100%;
  /* fixing overflow bug in IE*/
}

＆＃13;

<div class="column" id="column1">
  <p>
    This text will wrap even with ie flex bug. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div class="row">
  <div class="column" id="column2">
    <p>
      This text <strong>WONT WRAP</strong> for some reason even with ie flex bug. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
      anim id est laborum.
    </p>
  </div>
  <div class="column">
    <p>
      Lorem ipsum dolor sit amet
    </p>
  </div>
</div>

＆＃13;

#column1中的文字将按预期包装，但#column2中的任何内容都不会包含您尝试的任何内容。

我知道IE中的flexbox是错误的，但我无法找到bug。它不是Text in a flex container doesn't wrap in IE11的副本，因为第一列中的文本正确地使用上面的问题回答，但是当与flex行一起使用时，它在设置100％宽度时不会换行或{{ 1}} 100％

Flexbox flex-direction：flex-direction中的列项：IE11中的行被破坏

0 个答案: