如何使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的期望有误。

---

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

利用回答另一个SO问题，我成功做到了这一点--而没有使用flexbox。 http://codepen.io/anon/pen/ZbeQmW 所以，谢谢@AaronSieb，我想。

- craPkit

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

- Elliot

---

@craPkit 的 flex-direction: row-reverse 对我非常有效。我会考虑将其作为被采纳的答案。 - Greendrake

Answer 2

看起来这并不是一个flexbox问题，更像是Internet Explorer如何处理overflow: hidden的问题。

在你的代码中，弹性容器的宽度设置为200px。如果你把它改成比如说500px，你会发现justify-content: flex-end在IE11（以及其他主流浏览器）中运行得非常完美。

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

似乎在IE11中，当overflow: hidden裁剪内容时，flex对齐并不受尊重。以下是另一个测试：

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

在IE11中没有任何变化（flex-start和flex-end看起来相同）。但是，如果将width扩展到500px，则会发现实际应用了flex-start。（center值也是如此。）

基于这些测试，我认为这不是一个flexbox问题。在快速搜索中，我找不到关于overflow: hidden和IE11存在问题的任何信息，但可能问题就出在这里。

- Michael Benjamin

---

感谢您的详细解释。也许在另一个令人难以忍受的IE出现之后，我会重新考虑我的问题，但目前我接受您的回答作为悲惨的事实和我的问题的答案。 - craPkit

Answer 3

正如其他人所说，忘记在IE 11.0及以下版本中使用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>

- the.reversengineer