如何让 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

我希望 'bacon' 项目与框的右端对齐；相反 't-bone' 左对齐。

如有错误请指出，可能是我对 Internet Explorer 的期望。

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

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

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

所以，谢谢@AaronSieb，我想。

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 的问题，但这可能就是问题所在。

Answer 2

正如其他人所说，对于 11.0 版以下的 IE，请忘记 flex CSS。我略微更改了您的第一个建议代码，包括 CSS 和 HTML，突出显示 changed/added 行：

.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>

Answer 3

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

需要注意的是，这仅在以下情况下有效：a) 您只有一个 flex child 或 b) 您愿意在标记中颠倒 flex child 的顺序。

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

.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>

如何让 flex-end 在 IE11 中工作

How to make flex-end work in IE11

html

css

flexbox

internet-explorer-11