html - Internet Explorer 11 中流体 flexbox 容器内的元素出现 "overflow: auto"问题

Question

任务:

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

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

截图:

Chrome /火狐:

互联网浏览器 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 有不少bug，忽略min/max-height就是其中之一。

在这种情况下，我发现在 wrapper 上使用 flex column 方向, 并删除 align-items: center做的伎俩。

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

请注意，在 IE 中仍然存在一个缺陷，如果您启动并手动更改浏览器高度，即使文本适合，滚动也不会消失，但如果重新加载页面，它会起作用.我仍在研究这个问题，看看是否可以做些什么来解决这个问题。

堆栈片段

.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>