CODEWITHSUNDEEP
cssflexbox
helion3
helion3

Reputation: 37351

Equal width flexbox columns in IE

I'm building a simple flexbox column layout and have to support IE10. I'm finding that IE will grow a flex child with its contents, while other browsers keep each flexbox at an equal width.

I can solve this issue by setting a max-width: 50%, but this means we need percentages based on the number of columns we want. It works for two columns, but for three we'd need 33.333% etc.

Is there any other way to make IE10/11 to keep flex widths equal?

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
</div>


.columns {
  display: -ms-flexbox;
  -ms-flex-flow: row;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
  width: 100%;
}

.column {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  min-height: 200px;
  border: 1px solid red;
}

http://jsbin.com/gimifixexo/1/edit?html,css,output

Upvotes: 3

Views: 2849

Answers (2)

Asons
Asons

Reputation: 87191

I'm finding that IE will grow a flex child with its contents, while other browsers keep each flexbox at an equal width.

No, that is not entirely correct, they all, by default, size the flex item based on its content.

There is a difference though, where for most browsers a flex item's default flex is flex: 0 1 auto, but for IE10 it is flex: 0 0 auto.

This basically mean all but IE10 allow flex item's to shrink (the second value represents flex-shrink).

So to make this work, all that should be needed is flex: 1 1 0.

But, to also make IE 10 and 11 behave, we need to give the flex-basis a unit, 0px, and IE10 might also need width: 100%, though can say for sure as I run mine emulated.

With the short flex: 1, IE11 will, in general, automatically set its flex-basis with a unit, though for IE10 it might not, and I'm not fully sure if the prefixed property is bug free, and since I can't test it properly not having devices with the older browsers, using the full shorthand *-flex will be safer.

Stack snippet

.columns {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /*  "flex-flow: row" is default, and so is "width: 100%"
  -ms-flex-flow: row;
  -webkit-flex-flow: row;
  flex-flow: row;
  width: 100%;*/
}

.column {
  -ms-flex: 1 1 0px;                  /*  IE10 fix  */
  -webkit-flex: 1 1 0;                /*  changed  */
  flex: 1;                            /*  changed  */
  min-height: 70px;
  border: 1px solid red;
  width: 100%;                        /*  IE10 might need this  */
}
<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
</div>

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
  <div class="column"></div>
</div>

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Upvotes: 3

Chris Burgin
Chris Burgin

Reputation: 256

So flex right now is a major problem for IE10/11. It has some major problems which have work arounds. I do not have an environment to test but the link below should provide you the resources needed to solve your problem.

http://caniuse.com/#search=flex

Pay attention to the Known Issues page, this is just a note. Even though CanIUse does list flex as working for IE11 I can confirm that many of its elements are broken as well.

Also, just so you know, if you want to use columns and have an odd number, like 3. Using 33% will work perfectly fine. On top of this just use 

justify-content: space-between

or alternatively 

justify-content: space-around;

This will make it seems like the columns by evenly distributed by spacing them appropriately. There is more information on justify-content here. https://css-tricks.com/almanac/properties/j/justify-content/

Upvotes: 0

Related Questions