如何使IE11中的flex-end工作 [英] How to make flex-end work in IE11

问题描述

我试图在IE11中使 justify-content：flex-end; 工作，用于溢出隐藏的DIV内容，但未成功。

尝试几个组合后，我创建了一个在Chrome中但不在IE11中使用的最小片段：

  .token- container {width：200px; white-space：nowrap; overflow：hidden; padding：5px; box-shadow：1px 1px 2px 1px silver inset;显示：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>汉堡包< / 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'项目与盒的右端;

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

---

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

=http://stackoverflow.com/a/9685453/2795627>回应另一个SO问题，我能够做到 - 不使用flexbox。

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

因此，感谢@AaronSieb，我猜。

解决方案

是一个flexbox问题。似乎更多的问题是Internet Explorer如何处理 overflow：hidden 。

flex容器的宽度设置为200px。如果你改变这个，比方说，500px，你会看到 justify-content：flex-end 在IE11（和所有其他主流浏览器）中工作得很好。

  .token-container {width：500px; } / *让这个调整从200px * / 
  

看起来当 ：hidden 在IE11中剪辑内容，没有太多尊重flex对齐。这是另一个测试：

将宽度还原为200像素。然后将对齐方式更改为 justify-content：flex-start 。

IE11中没有任何变化c> flex-start 和 flex-end 看起来是一样的）。但是如果你将 width 扩展到500px，你会看到 flex-start 实际上应用了。 （与 center 值相同。）

根据这些测试，我认为这不是一个flexbox问题。在快速搜索中，我找不到任何有关 overflow：hidden 和IE11的问题，但可能是问题所在。

I tried to make justify-content: flex-end; work, for overflowing-hidden DIV content, in IE11, without success.

After trying several combinations I created a minimal snippet which works in Chrome but not in 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>

Here's the same snippet in CodePen: http://codepen.io/anon/pen/bVgOYJ

I would expect the 'bacon' item to be aligned with the right end of the box; instead the 't-bone' is aligned left.

Please point out any errors, perhaps in my expectations for Internet Explorer.

---

UPDATE: Added my own alternative solution

Leveraging a response to another SO question, I was able to do it--without using flexbox.

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

So, thanks @AaronSieb, I guess.

解决方案

This doesn't appear to be a flexbox issue. It appears to be more an issue of how Internet Explorer handles overflow: hidden.

In your code you have the width of the flex container set to 200px. If you change this to, let's say, 500px, you'll see that justify-content: flex-end is working perfectly well in IE11 (and all other major browsers).

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

It appears that when overflow: hidden clips content in IE11, there isn't much respect for flex alignment. Here's another test:

Restore the width to 200px. Then change the alignment to justify-content: flex-start.

Nothing changes in IE11 (flex-start and flex-end look the same). But if you expand the width to 500px you'll see that flex-start is actually applied. (Same deal with center value.)

Based on these tests I would say this is not a flexbox issue. In a quick search I couldn't find anything about problems with overflow: hidden and IE11, but that may be where the problem lies.

这篇关于如何使IE11中的flex-end工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！