具有可滚动内容的flexbox三列布局在Chrome中可用，但在IE中已损坏

Question

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

Google Chrome很好地显示了结果：

但Edge或Internet Explorer的行为有所不同：

到目前为止，我已尝试调整

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

但是这些组合都没有成功。

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

这是我的代码：

html,
body {
  padding: 0;
  margin: 0;
}

.headerPane {
  height: 66px;
  background-color: #ccc;
}

.footerPane {
  position: absolute;
  height: 49px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ccc;
}

.body {
  position: absolute;
  top: 66px;
  right: 0;
  bottom: 49px;
  left: 0;
  display: flex;
}

.actionPane {
  height: 40px;
  background-color: #999;
}

.sidebar {
  width: 100px;
  overflow-y: scroll;
}

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

.content {
  flex: 1;
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.box {
  display: flex;
}

.column {
  padding: 10px;
}

.column > div {}

.column:nth-child(1) {
  overflow-y: scroll;
  width: 100px;
}

.column:nth-child(2) {
  width: 250px;
  overflow-y: scroll;
}

<div class="headerPane">headerPane (no scoll)</div>
<div class="body">
  <div class="sidebar">sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />sidebar
    <br />
  </div>
  <div class="main">
    <div class="actionPane">actionPane with buttons (no scroll)</div>
    <div class="content">
      <div class="box">
        <div class="column">
          <div>Sub 1</div>
          <div>Sub 1</div>
          <div>Sub 1</div>
          <div>Sub 1</div>
          <div>Sub 1</div>
          <div>Sub 1</div>
          <div>Sub 1</div>
          <div>Sub 1</div>
          <div>Sub 1</div>
        </div>
        <div class="column">
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mattis dui. Suspendisse consequat tincidunt ligula quis pretium. Praesent facilisis turpis urna, vitae mollis turpis condimentum quis. Fusce molestie nulla venenatis erat consectetur,
            feugiat congue leo mollis. Nam ac magna ut metus venenatis dapibus. Suspendisse ornare ullamcorper tellus, quis tempus nisi aliquet vel. Sed congue sollicitudin libero id posuere. Nunc maximus aliquam eros.</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="footerPane">Footer (no scroll)</div>

我还在这里创建了一个小提琴：https://jsfiddle.net/p3e7ka20/8/

提前致谢。

Answer 1

添加以下css：

.box {
   height: 100%;
}

overflow-y需要一些已定义的height才能正常工作。