How to make the map fit inside div boxes in display table - html

Question

I want to render maps like this way by using display:table.
But it seems that it doesn't follow fixed height, making div bigger when I clicked a button
for showing 4 maps.
I set 50% height for map13 when clicked button #four.
Is there a way to make the map fit inside div boxes? or should I not use display:table?
function divideMap(divisionType) {
$('#map24').css('display', 'none');
$('#map3').css('display', 'none');
if (divisionType === 'four') {
$('#map13').css('height', '50%');
$('#map13').css('width', 'auto');
$('#map24').css('display', 'table-row');
$('#map3,#map4').css('display', 'table-cell');
} else if (divisionType === 'two vertical') {
$('#map3').css('display', 'table-cell');
} else if (divisionType === 'two horizontal') {
$('#map24').css('display', 'table-row');
$('#map4').css('display', 'none');
} else {
}
mainMap.updateSize();
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
overflow: hidden;
}
#header {
height: 10%;
width: 100%;
background-color: silver;
float: left;
}
#main {
height: 90%;
width: 100%;
}
#contents {
height: 100%;
width: 100%;
}
#fullscreen {
height: 100%;
width: 100%;
display: table;
table-layout: fixed;
}
#map13 {
display: table-row;
}
#map1 {
display: table-cell;
border: 1px solid black;
}
#map3 {
display: none;
border: 1px solid black;
}
#map24 {
display: none;
}
#map2 {
display: table-cell;
background-color: darkslategray;
border: 1px solid black;
}
#map4 {
display: table-cell;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<button onclick="divideMap('original')">reset</button>
<button onclick="divideMap('two vertical')">two vertical</button>
<button onclick="divideMap('two horizontal')">two horizontal</button>
<button onclick="divideMap('four')">four</button>
</div>
<div id="main">
<div id="contents">
<div id="fullscreen">
<div id="map13">
<div id="map1">
</div>
<div id="map3">
</div>
</div>
<div id="map24">
<div id="map2">
</div>
<div id="map4">
</div>
</div>
</div>
</div>
</div>