Javascript 传单地图溢出侧边栏，并有滚动条时，它应该调整大小，以适应剩余的窗口

我正在尝试创建一个基于地图的网站，带有一个可折叠的边栏，显示地图上的基本信息。地图上方还有一个固定大小的空间。地图应该展开并对比以适应剩余空间，但没有任何滚动条

我目前得到的是一张地图：

具有垂直和水平滚动条

如果您滚动到侧边，侧边栏顶部会出现用于选择平铺集的按钮，如果没有滚动条，当然不会出现这种情况

我尝试了几种不同的CSS和HTML样式组合，如FlexBox、媒体查询等，但还没有找到有效的方法

我的代码基于：它使用谷歌地图而不是传单，所以不太一样：

我也发现了一个问题，但无法理解以下内容中的所有CSS：

如果能在没有滚动条的情况下帮助我显示地图，那就太好了

以下是我用作密码的代码

小提琴的不完整版本如下：

HTML

<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav" id="side_bar">
            <li class="sidebar-brand" style="font-weight: bold; color: #999999;">
                <h1>INFO</h1>
                <p> Marker at:</p>
                <div id="selected-coords"> </div>
            </li>
            <hr>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->
    <!-- Page Content -->
    <div id="map-wrapper">
        <div class="container-fluid">
            <div class="row"><span></span>
                <div class="col-lg-12">
                    <h1>
                        <a href="#menu-toggle" class="gradient-menu" id="menu-toggle"></a>
                        &nbsp;Map&nbsp;
                    </h1>
                    <!-- you can use tables or divs for the overall layout -->
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>

CSS

//copied from so: https://stackoverflow.com/questions/35610873/google-maps-with-responsive-sidebar
var myWrapper = $("#wrapper");
$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    myWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (e) {
        // code to execute after transition ends
        // google.maps.event.trigger(map, 'resize');
        window.setTimeout(function () { window.map.invalidateSize(); }, 600);
    });
});

    html,
body {
  height: 100%;
}
#map,
#wrapper,
#map-wrapper {
  height: 100%;
  width: 100%;
}
.container-fluid,
.row,
.col-lg-12 {
  height: 100%;
  width: 100%;
}
#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}
#map-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}
#wrapper.toggled #map-wrapper {
  position: absolute;
  margin-right: -250px;
}
@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #sidebar-wrapper {
    width: 250px;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #map-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #map-wrapper {
    position: relative;
    margin-right: 0;
  }
}

同样，作为一个