如何在 IE11 中使 flex-end 工作

Question

我试图justify-content: flex-end;在 IE11 中为溢出隐藏的 DIV 内容工作，但没有成功。

在尝试了几种组合后，我创建了一个在 Chrome 中有效但在 IE11 中无效的最小片段：

.token-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px 1px 2px 1px silver inset;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  //align-content: flex-end;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px 3px 0 0;
  border-radius: 4px;
  height: 19px;
  padding: 0 3px;
}

<div class="token-container">
  <div class="token">
    <span class="token-text">t-bone</span>
  </div>
  <div class="token"><span class="token-text">hamburger</span></div>
  <div class="token"><span class="token-text">pancetta</span></div>
  <div class="token"><span class="token-text">leberkäs</span></div>
  <div class="token"><span class="token-text">bacon</span></div>
</div>

这是 CodePen 中的相同片段：http ://codepen.io/anon/pen/bVgOYJ

我希望“培根”项目与盒子的右端对齐；相反，“t-bone”是左对齐的。

请指出任何错误，也许是我对 Internet Explorer 的期望。

---

更新：添加了我自己的替代解决方案

利用对另一个 SO 问题的回答，我能够做到这一点——而无需使用 flexbox。

http://codepen.io/anon/pen/ZbeQmW

所以，谢谢@AaronSieb，我想。

Answer 1

这可以通过 flexbox 来完成 - 如果你愿意稍微弄乱你的标记。虽然 IE11 不尊重flex-endflex 父级overflow: hidden，但它确实尊重flex-start（默认理由）。这意味着，如果您将父项的 flex 方向设置为 ，row-reverse您可以获得所需的行为（将子项与父项的右边缘对齐并让它们向左溢出）。

显然，这仅在 a) 您有单个 flex 子项或 b) 您愿意在标记中颠倒 flex 子项的顺序时才有效。

将此应用于您的原始代码，我们得到：

.token-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px 1px 2px 1px silver inset;

  display: flex;
  flex-direction: row-reverse;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px 3px 0 0;
  border-radius: 4px;
  height: 19px;
  padding: 0 3px;
}

<div class="token-container">
  <div class="token"><span class="token-text">bacon</span></div>
  <div class="token"><span class="token-text">leberkäs</span></div>
  <div class="token"><span class="token-text">pancetta</span></div>
  <div class="token"><span class="token-text">hamburger</span></div>
  <div class="token">
    <span class="token-text">t-bone</span>
  </div>
</div>