Flexbugs: IE11 忽略嵌套 flex 元素的宽度

创建于 2015-11-28  ·  3评论  ·  资料来源: philipwalton/flexbugs

我已经尝试了很多次迭代...... ff/chrome/safari 中的问题为零,但在 IE11 中,“元素”对象组只是一条长线。

帮我欧比旺?...

<html ><body>
<style>
.outer-rowwrap{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:1200px;height:100%;background-color:#f0f0f0;}
.inner-rowwrap{display:flex;flex-direction:row;flex-wrap:wrap;}
.nested-element{width:100px;text-align:center;border:1px solid #333;margin:5px;}
.nogrow{flex-grow:0;flex-shrink:0;flex-basis:auto;}
.grow1{flex-grow:1;flex-shrink:1;flex-basis:auto;}
</style>
<div class="outer-rowwrap">
    <div class="nogrow" style="width:200px;background-color:#ccc;">column here</div>
    <div class="grow1">
        <div class="inner-rowwrap">
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
        </div>
    </div>
</div>
</body>
</html>

最有用的评论

当容器的宽度不确定时,IE11 不能很好地处理flex-basis: auto + flex-grow: 1 。 我还没有真正确定一致的回购 + 解决方法,所以我没有记录它。

这可以修复您的网站:
http://codepen.io/anon/pen/OMLRVN

另外,将来请发布一个演示,而不仅仅是代码,否则我必须把它放在一起,如果我心情不好我可能不会这样做:)

所有3条评论

当容器的宽度不确定时,IE11 不能很好地处理flex-basis: auto + flex-grow: 1 。 我还没有真正确定一致的回购 + 解决方法,所以我没有记录它。

这可以修复您的网站:
http://codepen.io/anon/pen/OMLRVN

另外,将来请发布一个演示,而不仅仅是代码,否则我必须把它放在一起,如果我心情不好我可能不会这样做:)

真诚的谢谢。 这看起来像它的伎俩!

标记

此页面是否有帮助?
0 / 5 - 0 等级