在 IE11 中包装 flex 项目被破坏

Posted 2023-03-05

【中文标题】在 IE11 中包装 flex 项目被破坏

【英文标题】：Wrapping flex items in IE11 is broken

【发布时间】：2014-07-21 15:40:36

【问题描述】：

我正在尝试使用新的 CSS3 Flexbox 功能构建表单布局。 目标是当您更改字段集中的元素数量、更改字体大小或更改视图大小时，字段集的元素会正确排列。 表单布局应该适用于所有现代浏览器：Chrome 35、Firefox 29 和 IE 11 它看起来很有前途，只是它在 IE 11 中不起作用。

我简化了代码并将其发布到http://jsfiddle.net/T4RL6/。 这里的视图看起来像 Chrome 和 Firefox 一样正确。

最重要的 CSS 代码部分：

.fieldset 
    background-color: green;
    border: 1px solid blue;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-start;

但是 IE 11 根本不包装元素，所以它们用完了 #right div。 我很确定它应该在 IE11 中工作，你不需要-ms-flex-***： http://msdn.microsoft.com/de-de/library/ie/dn265027%28v=vs.85%29.aspx

【参考方案1】：

看起来您几乎在每个元素上都调用了display: flex;。只有需要灵活的容器才应该具有该属性。这是我想出的，它似乎按照您要求的方式工作。

* 
    margin: 0px;
    padding: 0px;


body 
    background-color: black;
    font-family: Verdana sans-serif;
    font-size: 20px;


#content_wrapper 
    box-sizing: border-box;
    padding: 20px 20px;
    width: 100%;
    height: 100%;


#main_wrapper 
    display: flex;
    min-height: 20px;
    overflow: hidden;
    border: 5px solid red;


#right 
    flex: 1 auto;
    width: 400px;
    background: #cccccc;


fieldset 
    margin: 10px 0px;


.fieldset 
    background-color: green;
    border: 1px solid blue;


#pdf 
    width: 100%;
    height: 100%;


img 
    width: 100%;
    height: 100%;



form 
    margin: 20px 20px;


.field 
    display: flex;
    margin: 10px 10px;
    border: 1px solid black;
    align-content: stretch;
    padding: 5px 5px;


.smallInput 
    /* flex: 1 0 0; */


.bigInput 
    /* flex: 2 0 0; */


input 
    flex: 2;


label 
    flex: 1;
    margin-right: 10px;

这里有一个updated fiddle 来查看它的实际效果。

【讨论】：

但是如果你需要嵌套的弹性盒子呢？

好问题。任何时候你需要两个或多个项目相互灵活，父容器应该display: flex;。但是，如果子元素本身没有任何弹性子元素，则无需将其放在子元素上。

【参考方案2】：

三年半后遇到了类似的问题。当一个灵活的容器溢出并且它的大小没有给出时，有时 IE 会尝试增加容器的大小而不是包装项目（与线程创建者链接的文章相反，该文章指出不会再发生）。

在您的情况下，您可能想尝试为容器设置width: 100%;，或者实际上是任何宽度值。