cha0s,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-content: center;
align-content: center;
width: 100%;
height: 90%;
background-color: green;
}
.flex-item {
background-color: red;
min-height:88%;
margin: 5px;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item1 {
max-width: 512px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">item 1<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi, inquam, qui te id ipsum rogavi? <b>Tu quidem reddes;</b> Nam quid possumus facere melius? Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Aliter enim explicari, quod quaeritur, non potest. <mark>Itaque fecimus.</mark> </p></div>
<div class="flex-item item2">item 2</div>
</div>
</body>
</html>