Internet Explorer 11 中流体 flexbox 容器内元素的“溢出：自动”问题

Question

任务：

有一个高度可变的框，必须在浏览器窗口中居中。它由三部分组成： - 顶部的任何长度取决于里面的文字 - 底部有任何长度取决于文本indside - 如果没有足够的空间容纳文本，则可以滚动的中间部分

问题： 实现我在父 display: flex; flex-direction: column; 上使用 flexbox 的任务。顶部和底部有flex-shrink: 0; 中间的部分设置为overlow: auto。由于某种原因，Internet Explorer 11 中没有滚动。溢出属性被完全忽略。在 Firefox 和 Chrome 中运行良好。

截图：

Chrome/Firefox：

Internet Explorer 11：

代码：

.wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  max-height: 90vh;
  width: 100%;
  border: 1px solid red;
}

.top,
.bottom {
  flex-shrink: 0;
  padding: 10px;
  background: #ccc;    
}

.scrollable {
  overflow: auto;
}

<div class="wrapper">
  <div class="box">
    <div class="top">I'm any length text</div>
    <div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eleifend nisi ac laoreet. Praesent commodo bibendum turpis nec finibus. Aenean ac tincidunt velit. Sed et sodales quam, efficitur viverra erat. Pellentesque aliquet ultrices lectus at vulputate. In pulvinar nec ex sed condimentum. Vivamus vitae vulputate urna. Aliquam lobortis iaculis lacus a dictum. Pellentesque odio mauris, tincidunt sit amet sem dapibus, pretium ornare turpis. In sit amet justo luctus, ultricies nisi eu, iaculis erat. Pellentesque et tempor nibh. Vivamus congue elementum elit, id tempus dolor laoreet sed.

Vestibulum dictum efficitur metus, in consectetur turpis. Vestibulum vel vehicula ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc congue, odio ac malesuada pharetra, velit nisl facilisis lorem, at tincidunt ex metus volutpat diam. Integer varius dolor at tellus dapibus ultrices. Nulla sagittis purus in mauris vestibulum, ac facilisis turpis condimentum. Ut mattis in ex eu mattis. Nullam ac elit metus. Nullam finibus tempus lacus, sit amet sagittis ante. Morbi sit amet sem a nisi volutpat luctus. Suspendisse eget condimentum dui. Proin suscipit sed sapien a efficitur.      
    </div>
    <div class="bottom">I'm any length footer</div>
  </div>
</div>

有没有办法解决这个问题？那里有什么问题以及如何使 IE 呈现滚动？

Answer 1

IE 有很多错误，忽略 min/max-height 就是其中之一。

在这种情况下，我发现在 wrapper 上使用 flex column 方向，然后删除 align-items: center 就可以了。

要使其水平居中对齐，请在 box 上使用自动边距

注意，这在 IE 中还有一个缺陷，如果你启动并手动更改浏览器高度，即使文本适合，滚动也不会消失，但如果重新加载页面，它可以工作.我仍在调查这个问题，看看可以做些什么/是否可以解决这个问题。

堆栈sn-p

.wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  max-height: 90vh;
  width: 100%;
  border: 1px solid red;
  margin: 0 auto;
}

.top,
.bottom {
  flex-shrink: 0;
  padding: 10px;
  background: #ccc;    
}

.scrollable {
  overflow: auto;
}

<div class="wrapper">
  <div class="box">
    <div class="top">I'm any length text</div>
    <div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eleifend nisi ac laoreet. Praesent commodo bibendum turpis nec finibus. Aenean ac tincidunt velit. Sed et sodales quam, efficitur viverra erat. Pellentesque aliquet ultrices lectus at vulputate. In pulvinar nec ex sed condimentum. Vivamus vitae vulputate urna. Aliquam lobortis iaculis lacus a dictum. Pellentesque odio mauris, tincidunt sit amet sem dapibus, pretium ornare turpis. In sit amet justo luctus, ultricies nisi eu, iaculis erat. Pellentesque et tempor nibh. Vivamus congue elementum elit, id tempus dolor laoreet sed.
    </div>
    <div class="bottom">I'm any length footer</div>
  </div>
</div>

Answer 2

尝试在元素上使用-ms-overflow-style: scrollbar;