Increase height of flex container with min-height on flex item - css

Question

I'm trying to create a layout - with a left floating div with vertical video/speaker/information divs and a right floating div with chapters - where the containers for chapters and information both cover the rest of the remaining height, with vertical scroll.
An example layout can be found at http://codepen.io/westis/pen/NPLwmy, with the HTML and CSS below. The embedded video is just an example video.
html, body {
font-family: arial, helvetica;
height: 100%;
margin: 0;
}
.title {
font-size: 1.5em;
padding: 0.5em;
margin-top: 0;
margin-bottom: 1em;
border-bottom: 3px solid #000;
text-transform: uppercase;
}
.main-container {
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
}
.left {
width: 59%;
margin-right: 2%;
float: left;
flex-direction: column;
display: flex;
position:relative;
flex-grow: 1;
}
.right {
float: right;
width: 39%;
background: #ff8100;
flex-direction: column;
display: flex;
position:relative;
flex-grow: 1;
}
.video {
position: relative;
padding-bottom: 57.25%;
padding-top: 25px;
height: 0;
z-index: 99;
flex: 1 1 auto;
}
.video iframe, .video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.speaker-container {
display: block;
width: 100%;
flex: 1 0 auto;
background: #ccc;
}
.speaker {
display: block;
float: left;
padding: 0.5em;
line-height: 1.5em;
}
.main-container h2 {
font-size: 1.5em;
line-height: 1.5;
font-style: normal;
font-weight: 400;
margin: 0;
}
.info-container {
overflow-y: auto;
flex: 1 0.5 auto;
margin-top: 1em;
}
.info {
background: #739bd2;
padding: 0.5em;
}
.chapter-container {
min-height: 200px;
overflow-y: auto;
}
.chapter-list {
padding: 0;
border-bottom: 1px solid #444;
margin: 0;
list-style: none;
}
.chapter {
display: block;
}
.chapter a {
padding: 0.5em 1em;
border-top: 1px solid #000;
text-decoration: none;
color: #000;
display: block;
}
h2 {
flex: 0 0 auto;
}
footer {
clear: both;
background: #000;
color: #fff;
padding: 1em;
}
<h1 class="title">Agenda title</h1>
<div class="main-container">
<div class="left">
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/lbtxvWsNERY?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
<div class="speaker-container">
<div class="speaker">Some name
</div>
</div>
<div class="info-container">
<div class="info scrollbox">
<h2 class="info-title">Chapter 1</h2>
<div class="info-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lobortis sapien. Vivamus lacinia egestas diam et faucibus. Curabitur ac mi fermentum, sodales arcu a, consectetur ipsum. Cras blandit lorem quis erat viverra, at iaculis enim consectetur. Vestibulum vel fermentum erat. Nam at justo ac elit pellentesque semper. Vivamus fringilla mattis nisl ut convallis. Nullam urna sem, pharetra sit amet hendrerit convallis, facilisis sed tortor. Integer suscipit hendrerit sollicitudin. Phasellus tristique orci enim, sit amet varius nulla faucibus quis.</p>
<p>Fusce massa quam, eleifend a ligula ut, porttitor suscipit turpis. Fusce id metus vitae nisi efficitur consequat in vitae arcu. Phasellus euismod hendrerit euismod. Vivamus maximus, nibh in dignissim viverra, massa eros lobortis lorem, at mollis elit purus at felis. Sed iaculis sed lacus a tristique. Mauris porta sodales massa, vel ultricies eros tristique a. Phasellus dolor justo, porta egestas elementum nec, interdum ut orci. Donec id orci nisl. Quisque sed erat nisi. Etiam ultrices nulla sit amet augue ultrices, ut ornare urna mattis.</p>
<p>Sed tortor ante, bibendum nec justo vel, efficitur tincidunt ex. Vestibulum condimentum neque et tincidunt dignissim. Maecenas eu erat ligula. Morbi quis dui a tortor hendrerit euismod. Aenean nibh odio, maximus sed nibh vitae, sagittis egestas sem. Fusce sapien nulla, malesuada molestie eros et, tristique lobortis libero. Quisque eget purus tortor. Sed eros odio, ultrices id ornare non, varius eu tellus. Morbi ante lectus, aliquam fermentum ligula sed, hendrerit luctus turpis. Duis sem neque, tincidunt ut gravida nec, lobortis at eros. Proin ullamcorper dui eu feugiat egestas. Nulla facilisi. Suspendisse a mollis arcu.</p></div>
</div>
</div>
</div>
<div class="right">
<h2>Chapters</h2>
<div class="chapter-container">
<ul class="chapter-list">
<li class="chapter">chapter 1</li>
<li class="chapter">chapter 2</li>
<li class="chapter">chapter 3</li>
<li class="chapter">chapter 4</li>
<li class="chapter">chapter 5</li>
<li class="chapter">chapter 6</li>
<li class="chapter">chapter 7</li>
<li class="chapter">chapter 8</li>
<li class="chapter">chapter 9</li>
<li class="chapter">chapter 10</li>
<li class="chapter">chapter 11</li>
<li class="chapter">chapter 12</li>
<li class="chapter">chapter 13</li>
<li class="chapter">chapter 14</li>
<li class="chapter">chapter 15</li>
<li class="chapter">chapter 16</li>
<li class="chapter">chapter 17</li>
<li class="chapter">chapter 18</li>
<li class="chapter">chapter 19</li>
<li class="chapter">chapter 20</li>
</ul>
</div>
</div>
</div>
<footer>Some footer</footer>
Using flex I have more or less accomplished what I want. But my questions are:
Is it possible to set a min-height to a flex-item, so that the flex
container increases beyond 100% height? As it is now, the info
container below the video and speaker container disappears when
browser is not tall enough.
Also, I seem to need to put flex-shrink to 0 for the
speaker-container div, or else it does not always show. But when
decreasing the browser height, this means that the
speaker-container (flex item) displays on top of the footer. How
can I avoid that?
The issue that CSS flexbox doesn't work properly in IE 10 and below probably
means I cannot accomplish this kind of layout for those
browsers? Some users will use IE9/IE10 so I would either need a fallback or they'd have to accept only having a page scroll.