html - page-break-inside 在 chrome 中不起作用

Question

<div class="parentElement">
    <div class="content-container">
        someContentFromApi
    </div>
    <div class="map-container">
        <div>
            <ng-map>Google maps is displayed here</ng-map>
        </div>
    </div>
<div>

CSS文件如下：

@media print {
    .map-container {
        position: relative;
        page-break-inside: avoid;
        // page-break-before: always; //I've tried uncommenting it

        div {
            height: 400px;
        }
    }
    .content-container {
        page-break-after: always;
    }
}

我已经如上所述设置了我的页面。当我在 chrome 中以打印模式预览页面时，地图被剪切了。我尝试了所有方法，例如将 page-break-inside：避免在 map-container 上，page-break-after：始终在 content-container 上，但似乎没有任何效果。

我发现了与 page-inside-break 属性相关的帖子，但似乎没有一个有效，这就是我发表这篇文章的原因。有什么我做错了，或者有什么其他方法可以在打印模式下实现分页。