Chrome 中的 CSS ms-grid 等价物

Question

我试图在 Windows 应用程序和 Chrome 网络浏览器中使用它，但网络浏览器不显示 canvasButtons div。我希望 canvasButtons 显示在 #canvasDiv 下方。 overflow:hidden 属性导致它不显示。但它作为 Windows 应用程序运行良好。是否有任何等效的 ms-grid ？

.container {
    -ms-grid-rows: 1fr auto;
    -ms-grid-columns: 1fr;
    display: -ms-grid;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.canvasEle {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}
.canvasButtons {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    width: 100%;
    height: 60px;     
    display: flex;  
    justify-content: center;
    -ms-flex-pack: center; 
}

 <div style="overflow:hidden">   
        <div class="container">
            <div id="canvasDiv">
               <canvas width="510" height="370" class="canvasEle"></canvas>
            </div>
            <div class="canvasButtons" >

                   <div class="button" onClick= handler()>
                        ....
                   </div>

                   <div class="button" onClick = handler()>

                   </div>
            </div>
            <div class="flyouts" >.....</div>
        </div>
    </div>

我尝试对 canvasButtons 部分使用 display:flex，但即使那样也效果不佳。 canvasButtons div 按我的意愿对齐，但点击处理程序稍后无法正常工作。

Answer 1

解决方案是添加 teh following to teh controls div - bottom: 0px, position: absolute