Question

HTML：

<div class="outer">
    <div class="inner">
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
    </div>
</div>

CSS：

.outer{position:relative;width:400px;padding:20px;background:yellow}
.inner{position:absolute;display:flex;background:red}
.box{height:100px;width:100px;border:1px solid black}

我正在尝试创建一个容器，其位置是绝对的，并且一些动态内部内容（div块）将不时附加到它上面。我希望这个容器的宽度相应地扩展。例如，'.inner'现在有5个子div，宽度为500px。当一个相同的'.box'div附加到'.inner'时，'.inner的宽度应为600px。当然，＆＃39; .box＆＃39;宽度也应该是动态的。在我看来，这可以通过使用flex显示轻松（或仅）完成，但我遇到了跨浏览器问题。在IE中，flex-container'.inner'被强制限制在其父级中，因此其宽度不是numberOfChildren * Children的宽度。无论如何要克服这个问题吗？

如何同步IE＆amp; flex CSS显示的Chrome行为

0 个答案: