在 IE11 上换行的 Flex 方向列问题答案

【问题标题】：Flex direction column issue with wrapping on IE11在 IE11 上换行的 Flex 方向列问题
【发布时间】：2018-10-03 19:06:54
【问题描述】：

尝试在 IE11 上使用带有列的 flex wrap 时遇到一个奇怪的问题。一般的想法是当项目符号点添加到某个高度时，项目符号点将进入下一行。除了 IE11 之外，这似乎在我检查过的浏览器上对我有用。我的代码如下。我需要做一些特定于 IE 的操作才能使其正常工作吗？

提前谢谢你

.checkbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1.6rem;
  list-style: none;
  margin: 20px auto;
  width: 100%;
  max-width: 50%;
  min-width: 200px;
  max-height: 100px;
  padding-left: 0;
  text-align: left;
}

<ul class="checkbox">
  <li>Help to Buy</li>
  <li>Part Exchange</li>
  <li>Home Scheme</li>
  <li>Chain Break</li>
  <li>Early Bird</li>
  <li>Stamp Duty</li>
</ul>

【问题讨论】：

根据caniuse，在IE11中使用flex有很多错误。（请参阅“已知问题”选项卡。）现在设置，即 height:4em 使其工作，但我不知道这是否适合您。
@MrLister 是的，我知道有相当多的错误，通常直到今天我还没有遇到太多关于 flex 的问题。指定高度似乎为我解决了这个问题。谢谢。

标签： html css flexbox internet-explorer-11

【解决方案1】：

@Mr Listers 的建议对我有用。在 IE11 上添加高度和最大高度现在对我有用。

.checkbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1.6rem;
  list-style: none;
  margin: 20px auto;
  width: 100%;
  height: 100px;
  max-width: 50%;
  min-width: 200px;
  max-height: 100px;
  padding-left: 0;
  text-align: left;
}

<ul class="checkbox">
  <li>Help to Buy</li>
  <li>Part Exchange</li>
  <li>Home Scheme</li>
  <li>Chain Break</li>
  <li>Early Bird</li>
  <li>Stamp Duty</li>
</ul>

【讨论】：