CSS Map and sidebar layout with flex-box - html

Question

let mymap = L.map('map').setView([54.5, -2], 6);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
}).addTo(mymap);
*{
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
.map-container{
display: flex;
}
/*#map {*/
/* //height: 100%;*/
/* //width: 100%;*/
/* position: absolute;*/
/* top: 0;*/
/* bottom: 0;*/
/* left: 0;*/
/* right: 0;*/
/*}*/
.map{
border: 1px solid green;
}
.info-block{
background: white;
width: 400px;
}
.info-block__inner{
overflow: scroll;
height: 100%;
}
.content_container{
padding: 0 20px 20px 20px;
}
.content{
margin-top: 30px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
<div class='map-container'>
<div id="map" class="map flex-element"></div>
<div class="info-block flex-element">
<div class="info-block__inner">
<div class="content_container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
I have a plunker here - https://plnkr.co/edit/RnJBeUaXcQtOneIn4jwM?p=preview
I'm trying to create a layout like this - https://plnkr.co/edit/PvszkAJCwFK9FhftEwTA?p=preview
I need the full page split into two columns one fixed with and the other the rest of the with of the page and containing the map.
Is it possbile to do this with flex box.
.map-container{
display: flex;
}

Answer 1

You can accomplish that with these steps:
Give map-container a height, height: 100%;
Add flex-grow: 1 to map, and it will take the avail space left (and order: 1 to move it to the right side)
Move overflow: scroll to info-block (I changed it to auto and also removed the info-block__inner as it appeared it was only there for the scroll)
Instead of adding order: 1 to map, you can of course move its markup after the info-block.
Updated plnkr
Stack snippet
let mymap = L.map('map').setView([54.5, -2], 6);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
}).addTo(mymap);
*{
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
.map-container{
display: flex;
height: 100%;
}
.map{
border: 1px solid green;
flex-grow: 1;
order: 1;
}
.info-block{
background: white;
width: 400px;
overflow: auto;
}
.content_container{
padding: 0 20px 20px 20px;
}
.content{
margin-top: 30px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
<div class='map-container'>
<div id="map" class="map flex-element"></div>
<div class="info-block flex-element">
<div class="content_container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>
</div>
</div>
</div>
</div>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

Answer 2

You could do something like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.parent {
display: flex; /* displays children inline */
}
.parent > .fixed {
width: 400px; /* adjust to your needs */
height: 200px; /* for presentation */
background: Teal;
}
.parent > .map {
flex: 1; /* takes all the remaining space */
height: 200px; /* for presentation */
background: Aqua;
}
#media screen and (max-width: 568px) { /* adjust to your needs */
.parent {
flex-direction: column; /* stacks children vertically */
}
.parent > .fixed {
width: 100%; /* makes it responsive */
}
}
<div class="parent">
<div class="fixed">CONTENT</div>
<div class="map">MAP</div>
</div>