带有mapbox gl js的CSS布局

我正在尝试创建一个地理位置web应用程序，用于我自己的学习。我正在使用Mapbox GL JS，在尝试使用CSS定位地图时遇到了很多麻烦

我可以同时拿到地图和状态面板

但我永远无法做到以下几点：

我用谷歌搜索了flexbox和CSS网格（分别），但结果是要么使地图消失，要么状态面板+控制面板消失

我应该调查什么

编辑#1：

/*在左面板上显示地图，在右面板上显示状态*/
#映射{位置：绝对；顶部：0；底部：0；宽度：760%；}
#log{float:right；}

编辑#2： /*我试过用bootstrap4。我得到的只是一张只有状态更新时才可见的地图*/

<div class="container">
    <div class="row">
        <div class="col-6"><div id="map"></div>
        </div>
        <div class="col-6">
            <div id="log"></div>
        </div>
    </div>
</div>

#map { position: absolute; top: 0; bottom: 0; width: 100%; }

#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}

答案是flex。简单的老Javascript。没有引导

//main.css

.container { padding: 0; margin: 0; display: flex; }
.left { flex: 2; }
.right { flex: 1; background-color: red;}

//main.html

<div class="container">
    <div class="left">
        <div id="map"></div>
    </div>
    <div class="right">
        <div id="control-panel">
            <button id="btncenter">Center</button>
        </div>
        <div id="status"></div>
    </div>
</div>

居中

答案是flex。简单的老Javascript。没有引导

//main.css

.container { padding: 0; margin: 0; display: flex; }
.left { flex: 2; }
.right { flex: 1; background-color: red;}

//main.html

<div class="container">
    <div class="left">
        <div id="map"></div>
    </div>
    <div class="right">
        <div id="control-panel">
            <button id="btncenter">Center</button>
        </div>
        <div id="status"></div>
    </div>
</div>

居中

能否提供当前实现的代码示例？能否提供当前实现的代码示例？