JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">

  <div id="app-container">

    <div id="app">

      <header>
        <div id="header-para-container">
          <p>Hello, this is CSS flexbox layout. Thank you for visiting this page.</p>
        </div>
        <div id="header-image-container">
          <img src="http://placekitten.com/g/300/300"/>
        </div>
      </header>

      <section id="grid-images">
        <figure><img src="http://placekitten.com/g/300/300"/></figure>
        <figure><img src="http://placekitten.com/g/300/300"/></figure>
        <figure><img src="http://placekitten.com/g/300/300"/></figure>
        <figure><img src="http://placekitten.com/g/300/300"/></figure>
      </section>

    </div>

  </div>
  
</div>

CSS

html {
  box-sizing: border-box;
  /* overflow-y: none; */
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

#all {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-items: center; */
  height: 100vh;
  background: #03a9f4;
}

#app-container {
    margin: auto; /* NEW */
}

#app {
  width: 500px;
  background: #ffffff;
  border: solid 6px yellow;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 4px blue;
  height: 20vh; /* NEW */
}

#header-para-container {
  flex: 1;
}

#header-image-container {
  flex: 0.6;
  background: #888;
  height: 100%; /* NEW */
}

#header-image-container > img {
  /* display: block; */
  /* width: 100%; */
  /* height: auto; */
  height: 100%; /* NEW */
}

section {
  display: flex;
  flex-wrap: wrap;
  border: solid 4px tomato;  
  height: 60vh; /* NEW */
}

figure {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  border: solid 4px green;
  height: 50%; /* NEW */
}

figure > img {
  /* max-width: 80%; */
  /* height: auto; */
  height: 100%; /* NEW */
}