我正在努力在不同的浏览器中为 flexbox 布局获得相同的行为(不要介意不支持 flexbox 的浏览器)。
这是标记:
<!-- nested version -->
<div class="flex-container"> <!-- display: flex -->
<div>
<div class="flex-container inner"> <!-- display: flex -->
<div class="auto-width">
auto take up needed space
</div>
<div class="flex-width"> <!-- flex: 1 -->
flex take up remaining space
</div>
</div>
</div>
</div>
我的问题是 IE11 的行为与 Firefox 和 Chrome 不同。我希望嵌套的 flexbox flex-container.inner
的宽度不受限制,因为现在我可以在哪里设置任何宽度。
这里有一个 JSBin 来说明问题:http://jsbin.com/pabesaci/5 .示例 3 是有问题的示例,它在 IE 中呈现不同。
在 IE 中呈现
在Chrome中渲染(FF类似)
这是 IE 中的错误吗?
您能建议其他实现此布局的方法吗?
最佳答案
<p>My example:</p>
<div style="float:left; display:block; width: auto; border: solid 2px red; padding: 2px;">
<div>
<div style="float:left; display: block; border: solid 2px yellow; padding:2px;">
<div style="float:left; display: block; border: solid 2px green;">
auto take up needed space
</div>
<div class="" style="float:left; position:relative; display:block; border: solid 2px blue;">
flex take up remaining space
</div>
</div>
</div>
</div>
关于html - 嵌套 flexbox 容器宽度的不同浏览器行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22862570/