html - IE 11 中的 Flex 元素不换行

Question

我正在尝试使用 CSS flexbox 布局创建带有标题的多选项卡组。 我遇到了一些元素没有在 IE11 中换行文本的问题。

我已经尝试过在 Stack Overflow 上讨论过的其他类似问题，方法是将 weight:100% 添加到 children，或者使用 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>

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

Answer 1

您可能需要像下面这样添加浏览器前缀

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