I'm currently working on designing a responsive splash page that covers most of the page (90vh). The layout includes a logo at the top and a simple paragraph at the bottom.
I've experimented with using flex-shrink and flex-basis, but it's not resizing the top image as expected without affecting the positioning of the bottom text within the container.
I can't pinpoint where I'm going wrong. It seems like the image size is somehow taking precedence over the flexbox when the page is wider than it is tall.
Here's a link to a code example on jFiddle: https://jsfiddle.net/jtpetqtk/
.splash-container{
display: flex;
height: 90vh;
flex-direction: column;
text-align: center;
border: 10px solid goldenrod;
justify-content: space-around;
}
.logo{
background: red;
img{
max-width: 100%;
max-height: 100%;
}
}
.mission{
background: yellow;
}<div class="splash-container">
<div class="logo">
<img src="http://www.ticotimes.net/wp-content/uploads/2016/01/150118Carrotandstick-800x800.jpg">
</div>
<div class="mission">
<h1>Mission Statement</h1>
<p>Our mission is to create a flexbox layout that remains responsive and contained within 90vh.</p>
</div>
</div>