如何在 IE11 中使 flex-end 工作

Posted 2023-03-05

【中文标题】如何在 IE11 中使 flex-end 工作

【英文标题】：How to make flex-end work in IE11

【发布时间】：2015-12-29 09:17:11

【问题描述】：

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

在尝试了几种组合之后，我创建了一个在 Chrome 中工作但在 IE11 中不可用的最小 sn-p：

.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 中相同的 sn-p：http://codepen.io/anon/pen/bVgOYJ

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

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

---

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

利用response to another SO question，我能够做到——无需使用 flexbox。

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

所以，谢谢@AaronSieb，我猜。

【参考方案1】：

这可以通过 flexbox 来完成——如果你愿意稍微弄乱你的标记的话。虽然 IE11 在具有 overflow: hidden 的 flex 父级中不尊重 flex-end，但它确实尊重 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>

【讨论】：

@craPkit flex-direction: row-reverse 为我工作出色。我会考虑将此作为公认的答案。

【参考方案2】：

正如其他人所说，忘记 11.0 及以下版本的 IE 的 flex CSS。 我稍微更改了您的第一个建议代码，包括 CSS 和 html，突出显示更改/添加的行：

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

    display: flex;
    flex-direction: row;

/* you have to nest your tokens inside another div with large fixed margin-left, flex-shrink: 0 (important), and no border nor padding */
.intermediate 
    flex: 1 0 auto;
    padding: 0;
    border: 0;
    margin: 0 0 0 -1000px;
    /* added: constant amount - the more, the better
       the perfect value is the workarea width, but, if available,
       you can use the maximum-width of a token element */

.token 
    display: inline-block;
    border: 1px solid silver;
    margin: 1px 3px 0 0;
    border-radius: 4px;
    height: 19px;
    padding: 0 3px;

    float: right; /* added: you need to reverse your tokens! (litte effort) */

<div class="token-container">
    <div class="intermediate">
        <!-- reversed children nodes -->
        <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>
</div>

【参考方案3】：

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

在您的代码中，您将 flex 容器的宽度设置为 200px。如果您将其更改为 500 像素，您将看到 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 问题的信息，但这可能就是问题所在。

【讨论】：

感谢您的详细说明。也许我的问题应该在另一个可恶的 IE 出现后重新审视，但现在我接受你的问题作为可悲的事实，因此我的问题的答案。