我试图做出合理的内容：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的期望.
利用response to another SO question,我能够做到 – 不使用flexBox.
http://codepen.io/anon/pen/ZbeQmW
所以,谢谢@AaronSieb,我想.
解决方法
这似乎不是一个flexBox问题.它似乎更像是Internet Explorer如何处理溢出的问题：隐藏.
在您的代码中,您将flex容器的宽度设置为200px.如果你把它更改为500px,你会看到这是正确的内容：flex-end在IE11(和所有其他主流浏览器)中运行得非常好.
.token-container { width: 500px; } /* make this adjustment from 200px */
看来,当溢出：IE11中隐藏的剪辑内容时,对柔性对齐没有太大的尊重.这是另一个测试：
将宽度恢复为200px.然后将对齐更改为justify-content：flex-start.
IE11中没有任何变化(flex-start和flex-end看起来相同).但是如果将宽度扩展到500px,您会看到实际应用了flex-start. (与中心值相同.)
根据这些测试,我会说这不是一个flexBox问题.在快速搜索中,我找不到溢出问题的任何内容：隐藏和IE11,但这可能是问题所在.
