Flex元素未在IE 11中包装文本

Question

我正在尝试使用CSS flexbox布局创建带标题的多标签组。 我遇到了一些问题，其中一些元素没有在IE11中包装文本。

我尝试过在Stack Overflow上讨论的其他类似问题，向儿童添加weight:100%，或者使用flex: 1或flex: 1 auto，但这些问题都没有解决问题。

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>

我注意到如果从flex-direction: column;中删除.tabGroupParent，那么子元素会在IE11中开始包装但我丢失了标题。在这种情况下，还有另一种方法可以实现居中标题吗？或者如何在不删除flex-direction: column的情况下将子元素包装在IE11中？

Answer 1

您可能需要添加浏览器前缀，如下所示

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