Flexbox: shrink image to fit

Question

I am trying to design a page with the following properties that will be used as digital signage:

• Page height is viewport height (100vh) so that sc

Answer 1

I just change the img class and add to class .green min-height: 100%; Additionally the image is responsive now with that code.

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 1 auto;
   min-height: 100%;
}

.green img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}