使用display flex

Question

请查看我的代码段。 我有3组，第一组（.grp-big）比第2组和第3组（.grp）大一点。

如果浏览器没有足够的空间，我使用.min-width强制组“向下”包裹。

如果您在完整浏览器中运行代码段，则这些组大于250px。但.grp-big总是大100px .grp。

为什么它会以这种方式表现？如果有足够的空间，我应该怎么做才能使这些组的大小相同？

修改 似乎只是一个IE11问题。

.container{
  display:flex;
  flex-wrap:wrap;
  
  }

.grp{
  flex:1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  }

.grp-big{
  flex:1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  
  }


.item{
   display:flex;
  margin:3px;
  }

label {
  width:25px;
  }

input{
  flex:1;
  }

<div class="container">
  <div class="grp-big">
    <div class="item">
      <label>L1</label>
      <input type="text"></input>
    </div>
    <div class="item">
      <label>L11</label>
      <input type="text"></input>
    </div>
  </div>
  <div class="grp">    
    <div class="item">
      <label>L2</label>
      <input type="text"></input>
    </div>
    <div class="item">
      <label>L21</label>
      <input type="text"></input>
    </div>
  </div>
  <div class="grp">
    <div class="item">
      <label>L3</label>
      <input type="text"></input>
    </div>
    <div class="item">
      <label>L31</label>
      <input type="text"></input>
    </div>

  </div>
</div>

Answer 1

我在Chrome和Firefox的全屏幕上获得了三个相等宽度的组。所以你的代码似乎在某些浏览器中运行良好。

如果您的问题出在其他浏览器上，可以选择以下方法：

而不是：

.grp {
  flex: 1;
  min-width: 150px;
}

.grp-big {
  flex:1;
  min-width: 250px;
}

使用此等价物：

.grp {
  flex: 1 0 150px;
}

.grp-big {
  flex: 1 0 250px;
}

或者这个：

.grp {
  flex: 1 0 33%;
  min-width: 150px;
}

.grp-big {
  flex: 1 0 33%;
  min-width: 250px;
}

另见帖子：flex property not working in IE