Issue with min-width when using display flex

Question

Please have a look at my snippet. I have 3 groups, the first group(.grp-big) is a bit bigger than group 2 and 3 (.grp).

I used .min-width to force the groups to wrap "down" if the browser doesn't have enough space.

If you run the snippet in full browser, the groups are way larger than 250px. however .grp-big is always 100px larger .grp.

Why does it behave that way and what should I do to make the groups all the same size if there's enough space?

EDIT Seems to be an IE11 issue only.

.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>

I'm getting three equal width groups on full screen in Chrome. — Michael Benjamin, Jan 18 '17 at 12:25

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

I'm getting three equal width groups on full screen in Chrome and Firefox. So your code appears to work fine in some browsers.

If your problem is on another browser, here are some alternatives:

Instead of:

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

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

Use this equivalent:

.grp {
  flex: 1 0 150px;
}

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

Or this:

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

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

Also see this post: flex property not working in IE

edited May 23 '17 at 12:08

Community

1
1

answered Jan 18 '17 at 12:33

Michael Benjamin

346,931
104
581
701

1

solution 2 with 33% worked! (solution 1 didn't) thanks for your help! :-) – gsharp Jan 18 '17 at 12:54

Issue with min-width when using display flex

1 Answers1