Hi I got an issue with my page where I have used Flex and height:x% to achieve a very botched but working responsive height for two divs within a container.
The problem I have is that it works fine in FF but not Chrome. (Assume IE, edge etc) doesn't either.
Here is what it looks like in FF: http://prntscr.com/a712g6 (this is what it should be)
Here it is in Chrome: http://prntscr.com/a712q4
Below is the code: (excuse the mess its a hacked up copy and paste of source code)
<!doctype html>
<html lang="en">
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/header.css?v=1.0">
<link rel="stylesheet" href="styles/content.css?v=1.0">
<link rel="stylesheet" href="styles/footer.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="MainHeader">
</div>
<div class="logged_container">
You are Logged in as <span style='font-weight:bold;'>Ryan</span> (<a href='logoff.php'>Log Out</a>)
</div>
<div class="navigation_container">
<a href="main.php">
<img src="img/test.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Home
</a>
</div>
<div class='content'>
<div class='contentTableView' style="flex: 1; flex-direction: column; min-height:100%; height: 100%; position: relative;">
<span class="contentHeader">Title</span>
<div id="map" class="map" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:20px; border:1px solid #0a639d;"></div>
<div id="controls" class="controls" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:10%; border:1px solid rgb(204, 204, 204); background-image: url('img/bms47.png');"></div>
</div>
</div>
<div class="footer">
Footer Text
</div>
</div>
</body>
</html>
Anyone got any suggestions?
EDIT: ATTACHED CSS http://pastebin.com/59rcgQwM
EDIT2: Issue Example jsfiddle.net/vctbszc2/3 – Adam Buchanan Smith
