Internet Explorer 11中的分割大小不起作用

Question

mi Angular应用程序应该可以正常工作，因此在IE11中可以在Chrome中使用。为此，我在styles.scss中尝试了以下效果良好的代码：

* {
    font-family: system-ui;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    * {
        font-family: verdana;
    }
}

System-ui在IE 11中无法识别，您可以看到我将其添加到特殊的选择器中。有用;因此，此语法正确。

现在，在内部组件中，我正在尝试使用相同的系统来更改div的高度，但是它不起作用。我想，我在选择器中出现了一些错误，而不是在尺寸上，因为我也尝试了使用非常简单的背景颜色样式的相同选择器，但它不起作用。

这是组件html模板：

<div class="clsMainContainer">
(...some things...)
</div>

这是完整的scss文件：

.filter-container {
    text-align: center;
}
.car-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em;
    border-bottom: 1px solid #d9dad9;
}
.car-details > div {
    display: flex;
    align-items: center;
}
.car-details > div img {
    margin-right: 14px;
}
.car-detail {
    padding: 0 1em 1em 1em;
    border-bottom: 1px solid #d9dad9;
    margin: 1em;
}
.ui-panel-content {
    padding: 1em;
}
.dark-theme :host ::ng-deep .car-details,
.dark-theme :host ::ng-deep .car-detail {
    border-bottom: 1px solid #191919;
}

@media (max-width: 1024px) {
    .car-details img {
         width: 75px;
    }
    .filter-container {
        text-align: left;
    }
}

.clsMainContainer {

    overflow-y: overlay;
    max-height: calc(100vh - 195px);
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .clsMainContainer {

        width: 100px;
        background-color: red;
    }
}

（（请注意，我仅创建了最后两种样式，另一种是PrimeNg默认样式。并且clsMainContainer在Chrome中可以正常工作。]

[上一个样式如何在IE11中工作？谢谢大家！

Answer 1

您可能想给浏览器更多的渲染空间。

如果浏览器具有正常的渲染空间，它将正常工作：

但是如果您减小渲染空间，它将被隐藏。