Section content won't resize while remaining within its container - html

Question

I'm creating a responsive, mobile first website and I am having a problem where the content within the #news section won't stay within that section as the browser resizes.
When this happened originally the content would expand and cover the footer area, so I searched and found someone saying I should put overflow: auto on the section but as you'll see in the screenshots this simply makes the content go behind the footer section which I also don't want.
What I am wondering is how can I make it to where the news section will stay above the footer and resize as the browser expands.
Here's a codepen that reproduces the issue using dummy images!! http://codepen.io/marlee/pen/OMeKWa
Let's start with screen shots:
What I'm showing here is when I expand the window the date and link disappear behind the footer section.
Here is the HTML for this section:
<section id="news">
<h2>Latest News</h2>
<line></line>
<ul>
<li>
<img src="images/tech.jpg" alt="New Product Strategy for SharePoint Flex in 2016" />
<small>19 January 2016</small>
LookOut Software accelerates innovation with SharePoint Flex, unveils product strategy for Spring and Summer 2016
</li>
<li>
<img src="images/world-economic-forum.png" alt="LookOut Software Chairman to participate in World Economic Forum in Toronto 2016" />
<small>5 February 2016</small>
LookOut Software Chairman to participate in the World Economic Forum Annual Meeting 2016
</li>
<li>
<img src="images/health.jpg" alt="LookOut Software joins the fight against the Zika virus" />
<small>12 February 2016</small>
LookOut Software announces partnership with the World Health Organization to combat Zika virus
</li>
<li>
<img src="images/render-logo.jpg" alt="LookOut founder to speak at Render Conference in Oxford" />
<small>20 February 2016</small>
LookOut Software founder and CEO to speak at Render Conference in Oxford, UK this April
</li>
</ul>
</section>
/* Footer */
<footer>
<div class="footer-top">
<div class="product-column">
<h4>Products</h4>
<ul class="products">
<li>
SharePoint Flex
</li>
<li>
Flex Platform
</li>
<li>
Flex Enterprise
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class="resources-column">
<h4>Resources</h4>
<ul class="resources">
<li>
Documentation
</li>
<li>
Blog
</li>
<li>
Get Started
</li>
</ul>
</div>
<div class="about-column">
<h4>About</h4>
<ul class="about">
<li>
About Us
</li>
<li>
Customers
</li>
<li>
Partners
</li>
</ul>
</div>
<div class="support-column">
<h4>Support</h4>
<ul class="support">
<li>
Help
</li>
<li>
Contact
</li>
<li>
Open a ticket
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<img src="images/lookout-temp.png">
<p>© 2016 LookOut Software</p>
</div>
</footer>
And the CSS:
/* Latest News Section */
#news{
height: 97rem;
background-color: white;
box-shadow: 0 0 2px rgba(6,8,8,0.15);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: auto;
}
#news h2{
text-align: center;
}
line{
display: block;
width: 30%;
height: 1px;
background: #e8e8e8;
}
#news ul{
display: flex;
flex-flow: column;
list-style: none;
padding-left: 0;
}
#news li{
margin: 1em .5em;
}
#news img{
width: 100%;
}
#news a{
text-decoration: none;
color: #3a3a3a;
font-size: 1rem;
}
/* Footer CSS*/
/* Footer Top */
.footer-top{
background-color: #F0F0F0;
height: 24rem;
display: flex;
flex-flow: row wrap;
}
.footer-top ul{
list-style-type: none;
padding-left: 1.5rem;
}
.footer-top h4{
padding-left: 1.5rem;
margin-bottom: .5rem;
}
.footer-top a{
text-decoration: none;
color: #3a3a3a;
font-size: 1rem;
}
.resources-column, .about-column, .product-column{
padding: .5rem;
}
.support-column{
padding-left: 2.3rem;
}
/* Footer Bottom */
.footer-bottom{
background-color: #F6F6F6;
height: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer-bottom img{
height: 6.25rem;
width: 15.625rem;
}
.footer-bottom p{
font-size: .80rem;
}
Any help is appreciated!

Answer 1

You've limited the height of the #news section with height: 97rem;.
This fixed height prevents the layout from adjusting to different screen sizes.
Instead of this:
#news { height: 97rem; }
Try this:
#new { min-height: 97rem; }
And you don't need the overflow: auto anymore.