我尝试让 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>
请指出任何错误,也许是我对Internet Explorer的期望有误。
更新:添加了自己的替代方案
利用回答另一个SO问题,我成功做到了这一点--而没有使用flexbox。 http://codepen.io/anon/pen/ZbeQmW 所以,谢谢@AaronSieb,我想。
flex-direction: row-reverse
对我非常有效。我会考虑将其作为被采纳的答案。 - Greendrake