为什么在 IE 11 中垂直滚动条的底部被截断了？

Question

我在以下 stackblitz link 中遇到问题，在 IE11 中，我的内容底部和应该允许您查看该内容的滚动条底部被从屏幕上剪掉了.

我已经在 Chrome、Firefox 和 Edge 中成功地解决了这个问题，但在 IE11 中没有解决这个问题。

编辑 1：

这里有一个 Code Pen，它完全重现了 HTML 和 CSS 中的问题。

// Code snippet to make stack overflow happy.

Codepen

Answer 1

在您的 css 中，html, body { } 溢出设置为 hidden，这导致了 IE11 中的问题。将其设置为 overflow: visible; 以使其工作。

最终CSS会是这样的：

/* Add application styles & imports to this file! */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

html, body {
  height: 100vh;
  margin: 0;
  overflow: visible;
}

* {
  box-sizing: border-box;
}

这里是 stackblitz link：https://stackblitz.com/edit/inline-conditional-component-px4p6f?file=src/styles.css

为什么在 IE 11 中垂直滚动条的底部被截断了？

Why is the bottom of a vertical scroll bar being cut off in IE 11?

html

css

flexbox

internet-explorer-11