Flex elements not wrapping text in IE 11

Question

I am trying to create multi tab groups with headers using CSS flexbox layout. I'm running into an issue where some elements are not wrapping text in IE11.

I have tried other similar issues discussed on Stack Overflow, by adding weight:100% to children, or using flex: 1 or flex: 1 auto, and none of those have resolved the issue.

https://codepen.io/Oboluse/pen/mmNaoR

.tabSection {
  display: flex;
}
h3 {
  padding: 10px;
  border: 1px solid gray;
}
.tabGroup {
  display: flex;
  align-items: flex-end;
  max-width: 100%;
}
.header {
  flex: 1 0 auto;
  text-align: center
}
.tabGroupParent {
  display: flex;
  flex-direction: column;
  border: 3px solid green
}
.tab {
  flex: 0 1 auto;
}

<div class="tabSection">
    <div class="tabGroupParent">
        <span class="header">header</span>
        <div class="tabGroup">
            <h3 class="tab">
                column value stuff stuff 1
            </h3>
            <h3 class="tab">
                column value stuff stuff 2
            </h3>
            <h3 class="tab">
                column value stuff stuff 3
            </h3>
        </div>
    </div>
    <div class="tabGroupParent">
        <span class="header">header</span>
        <div class="tabGroup">
            <h3 class="tab">
                column value stuff stuff 4
            </h3>
        </div>
    </div>
</div>

I have noticed if I remove flex-direction: column; from .tabGroupParent, then the child elements start wrapping in IE11 but I lose my header. Is there another way to achieve centered header in this case? or how can I get the children elements to wrap in IE11 without removing flex-direction: column?

text not wrapping in IE, this looks good in Chrome/Firefox

`.tabGroupParent { width: 100% }` https://codepen.io/anon/pen/rmXgLX — Michael Benjamin, Jun 01 '17 at 04:13
the child text elements now wrap but the problem is that the tab groups now expand to 100% of screen. I can have variable number of tabs under each group, so if each tab group has one tab they will still occupy 100% of monitor with lots of empty space in between. The original page in Chrome is what I'm trying to reproduce in IE11 — Oboluse, Jun 01 '17 at 20:35
IE11 has many flexbox-related bugs ([**flexbugs**](https://github.com/philipwalton/flexbugs)). I tried a bunch of workarounds, including `display: inline-flex` for the containers, but nothing worked. Doesn't mean there isn't a solution. Just means that all fixes I'm aware of aren't working in this case. Good luck. — Michael Benjamin, Jun 04 '17 at 13:17
https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox — Michael Benjamin, Jun 04 '17 at 13:21
Aside from the fact that `weight: 100%` is obviously supposed to be `height` or `width`, this doesn't appear to be reproducible in IE11 for me. It is exactly the same there as it is in Firefox and Chrome latest as of mid-Jan 2019. — TylerH, Jan 17 '19 at 15:43

score 0 · Answer 1 · answered Jun 01 '17 at 03:59

0

you may need to add browser prefix like below

.tabGroupParent {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   // flex-direction: column;
   border: 3px solid green
 }

answered Jun 01 '17 at 03:59

Rahul

4,294
1
10
12

unfortunately, that doesn't fix the issue – Oboluse Jun 01 '17 at 19:16

Flex elements not wrapping text in IE 11

1 Answers1