I have spent hours trying to fix this issue in IE11 with no luck. I need to use css Flex to group tabs on a page and give a heading to each tab group.
This works without issues in Chrome/Firefox. When there is extra space to the write of tabs, they don't wrap and they don't take 100% of width, unless they need it.
And they wrap nicely when window size is small:
But in IE tab texts are not wrapping.
I would appreciate any help on this.
This is a sample page very similar to what I'm working with. (I should note I did manage to get the tabs to wrap in IE at some point but then the tabs were expanding to fill up 100% of screen which I'm not supposed to have.
<style>
tabSection {
display: flex;
}
h3 {
padding: 10px; border: 1px solid gray;
}
.tabGroup {
display: flex; align-items: flex-end;
}
.header {
flex: 1 0 auto; text-align: center
}
.tabGroupParent {
display: flex; flex-direction: column; border: 3px solid green
}
.tab {
flex: 0 1 auto;
}
</style>
<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>
added codepen link https://codepen.io/Oboluse/pen/mmNaoR
Can you please remove the duplicate mark from this question. This is a different problem and does not get solved by adding width:100% to children elements in this case.
Interestingly, if I remove flex-direction: column; from .tabGroupParent child elements start wrapping in IE. But I'm not sure how else to achieve the Header look without using flex-direction:column here.
