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：总是放在内容容器上，但似乎没什么用。

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