JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flexcontainer">
   <div id="header">Title</div>
   <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
   <div id="firstContent">first</div>
   <div id="secondContent">second</div>
 </div>

CSS

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

#picture {
  min-height: 0;
  background-color: blue;
}

#picture>img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#header {
  background-color: green;
  font-weight: 700;
  font-size: 7rem;
}

#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}

body {
  margin: 0;
}