CSS FlexBox: equally sized elements - Internet Explorer BUG

Question

I am using CSS FlexBox to design my website. (See example below)

In FlexBox, "Flex:1" attribute will make sure all the items in the container are re-sized according to the widest item.

However, in Internet Explorer 10/11 this does not work unless you specify the width of the item. (Using flex-basis). The problem is that once you specify a flex-basis value, it becomes static and no longer shrinks or grows according to the content.

Is there some solution in IE without making the width static?

Thanks!

Example (IE - Bug, Chrome - Correct Behaviour): https://codepen.io/dsomekh/pen/BRoreL

<html>
<style>
.parent{

    display: flex;
    justify-content:center;
}
.table{
    display:flex;
    flex-direction:row;
}

.element{
    flex:1;
    border: 5px solid skyblue;
    display:flex;
}
</style>

<div class="parent">
    <div class="table">
        <div class="element">First element - small.</div>
        <div class="element">Second element - contains more text and first element will resize accordingly. How do we acheive this in IE?</div>
    </div>
</div>
</div>
</html>

You could always use percentage flex-basis. Though this might not be the problem. Flexbox will use the width of the container element to determine the appropriate measurements, similarly that parent's parent will need that if it's flex as well. So you could simply add a width of say 100%, to your table class and it should work as expected. Note that the chrome behavior makes a lot of assumptions since you don't specify a lot of constraints. IE also makes assumptions so the outputs looks different. — jalvarado91, Apr 18 '17 at 14:58
This does not solve my problem because the table class stretches on the entire page and each element takes 50%. This brings me back to the same problem - the width becomes static. — David Somekh, Apr 18 '17 at 15:37
Can you elaborate on what is the expected behavior you're looking for? The flex property is intended to stretch elements to fit their parent according to the settings you give it. However, you still need to specify a width constraint for your parent, either by adding a percentage based width or a flex property if applicable like LGSon did bellow. — jalvarado91, Apr 18 '17 at 15:43

Asons · Answer 1 · 2017-11-25T19:58:14.410

0

Updated

In this case IE need a width set, combined with flex: 1 1 0

.parent {
  display: flex;
  justify-content: center;
}

.table {
  display: flex;
  /* flex-direction: row;            row is default so this is not needed  */
}

.element {
  flex: 1 1 0;                          /*  changed  */
  width: 100%;                          /*  added  */
  border: 5px solid skyblue;
  display: flex;
}

<div class="parent">
  <div class="table">
    <div class="element">First element - small.</div>
    <div class="element">Second element - contains more text and first element will resize accordingly. How do we acheive this in IE?</div>
  </div>
</div>

edited Nov 25 '17 at 19:58

answered Apr 18 '17 at 15:15

Asons

84,923
12
110
165

This does not solve my problem because the table class stretches on the entire page and each element takes 50%. This brings me back to the same problem - the width becomes static. – David Somekh Apr 18 '17 at 15:33
@DavidSomekh I have now updated my answer with something that work cross browser. Hopefully I can have my answer upvoted/accepted now :) – Asons Nov 25 '17 at 19:58
@DavidSomekh Were my answer of no value, or you haven't seen it yet? – Asons Dec 04 '17 at 12:54

CSS FlexBox: equally sized elements - Internet Explorer BUG

1 Answers1