如何让 flex-end 在 IE11 中工作

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。

原文由 craPkit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这似乎不是 flexbox 问题。这似乎更多是 Internet Explorer 如何处理 overflow: hidden 的问题。

在您的代码中，您将 flex 容器的宽度设置为 200px。如果将其更改为，比方说，500px，您会看到 justify-content: flex-end 在 IE11（以及所有其他主要浏览器）中运行良好。

 .token-container {  width: 500px; } /* make this adjustment from 200px */

似乎当 overflow: hidden 在 IE11 中剪辑内容时，对 flex 对齐的尊重并不多。这是另一个测试：

将 width 恢复到200px。然后将对齐方式更改为 justify-content: flex-start 。

IE11 中没有任何变化（ flex-start 和 flex-end 看起来一样）。但是，如果您将 width 扩展到 500px，您会看到 flex-start 实际应用了。 （同样处理 center 值。）

基于这些测试，我会说这不是 flexbox 问题。在快速搜索中，我找不到任何关于 overflow: hidden 和 IE11 的问题，但这可能就是问题所在。

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这可以通过 flexbox 来实现——如果你愿意稍微弄乱你的标记。虽然 IE11 不尊重 flex-end 在具有 overflow: hidden 的 flex 父级中，它确实尊重 flex-start （默认调整）。这意味着如果您将父级的弹性方向设置为 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>

原文由 Elliot 发布，翻译遵循 CC BY-SA 4.0 许可协议