JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
   <div class="red"></div>
   <div class="blue"></div>
   <div class="green">
      <img src="http://lorempixel.com/200/300/">
   </div>
</div>

CSS

body {
   margin: 0;
}

div#container {
   display: flex;
   flex-direction: column;
   height: 100vh;
}

div.red {
   height: 100px;
   background-color: red;
   flex: 0 0 auto;
}

div.blue {
   height: 150px;
   background-color: blue;
   flex: 0 0 auto;
}

div.green {
   background-color: green;
   flex: 0 0 auto;
}

img {
   max-height: 100%;
   height: 100%;
   display: block;
   margin: 0;
}