Html flexbox三栏布局，可滚动内容，在Chrome中工作，但在IE中中断

我尝试用flexbox创建一个包含三个滚动列的页面布局

Google Chrome很好地显示了结果：

但Edge或Internet Explorer的表现有所不同：

到目前为止，我一直在努力调整

.box {
     display: flex;
     flex: 1;         
     flex-direction: column;
}

但没有一种组合能奏效

我很困惑，因为它正在使用

.sidebar

这是我的密码：

html，
身体{
填充：0；
保证金：0；
}
海黛烷{
高度：66px；
背景色：#ccc；
}
.页脚窗格{
位置：绝对位置；
高度：49px；
底部：0；
左：0；
宽度：100%；
背景色：#ccc；
}
.身体{
位置：绝对位置；
顶部：66px；
右：0；
底部：49px；
左：0；
显示器：flex；
}
.actionPane{
高度：40px；
背景色：#999；
}
.侧边栏{
宽度：100px；
溢出y：滚动；
}
梅因先生{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
.内容{
弹性：1；
显示器：flex；
溢出：自动；
弯曲方向：立柱；
}
.盒子{
显示器：flex；
}
.栏目{
填充：10px；
}
.column>div{}
.列：第n个子项（1）{
溢出y：滚动；
宽度：100px；
}
.列：第n个子项（2）{
宽度：250px；
溢出y：滚动；
}

头颅烷（无头颅）
边栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏


带按钮的操作窗格（无滚动）
子1
子1
子1
子1
子1
子1
子1
子1
子1
Lorem ipsum dolor sit amet，是一位杰出的献身者。酒后驾车。悬钩子。食用杜松子酱、杜松子酱调味品。这是一个不可能实现的目标，
世袭的康格·利奥·莫利斯。不，不，我是威尼斯人。悬垂物或悬垂物，指的是时间。这是一个自由球员俱乐部。努克·马克西姆斯·阿利奎姆·厄洛斯。
页脚（无滚动）

添加以下css：

.box {
   height: 100%;
}

---

overflow-y

需要一些定义的

高度才能正常工作。
感谢这个简单的解决方案！