JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="sector1"></div>

<div class="sector2">

  <div class="image-wrapper">
    <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
  </div>

<div class="image-wrapper">
    <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
  </div>
  
  <div class="image-wrapper">
    
  </div>
  
  <div class="image-wrapper">
    <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
  </div>
  
  <div class="image-wrapper">
    <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
  </div>
  

</div>

<div class="sector3"></div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  width: 600px;
  background-color: red;
}

.sector1 {
  display: flex;
  flex-direction: row;
  flex: 1 0 0%;
  background-color: green;
}


.sector3 {
  display: flex;
  flex-direction: row;
  flex: 1 0 0%;
  background-color: green;
}

.sector2 {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  background-color: blue;
  margin: 0 6px;
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
min-height: 0;
    min-width: 0;
}

.image {
   object-fit: scale-down;
   min-height: 100%;
   width: auto;
}