App.css

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  color: blue;
  flex-direction: column;
}
.container {
  text-align: center;
  color: blue;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container .box-1 {
  background-color: green;
  height: 30%;
  flex: 1;
  display: flex;
}
.container .box-2 {
  background-color: blue;
  flex: 1;
  height: 30%;
  display: flex;
}
.container .box-3 {
  background-color: red;
  height: 30%;
  flex: 1;
  display: flex;
}

.test {
  margin: 20px;
  display: flex;
  justify-content: center;
  flex: 1;
  background-color: pink;
}

img {
  flex: 1;
  width: 80%;
  /* max-height: 100%;
  max-width: 100%; */
  background-color: yellow;
}

App.js

import logo from './logo.svg';
import './App.css';
import React, { useState, useCallback, useEffect } from 'react';
import { Grid, Box, Container, Button, Paper } from '@material-ui/core';
import {
  BrowserView,
  MobileView,
  isBrowser,
  isMobile,
} from 'react-device-detect';

import UP from './assets/images/up_dark.svg';
import DOWN from './assets/images/down_dark.svg';
import OUT from './assets/images/out_dark.svg';
import IN from './assets/images/in_dark.svg';
import CW from './assets/images/cw_dark.svg';
import CCW from './assets/images/ccw_dark.svg';

const item = (
  <svg
    id="Layer_1"
    viewBox="0 0 152.3399963 152.3399963"
    enable-background="new 0 0 152.3399963 152.3399963"
    preserveAspectRatio="none"
    height="100%"
    width="100%"
    //preserveAspectRatio="xMidYMin slice"
    //preserveAspectRatio="xMidYMid meet"
  >
    <g id="Ebene_2">
      <g id="Ebene_1-2">
        <linearGradient
          id="SVGID_1_"
          gradientUnits="userSpaceOnUse"
          x1="-0.0049973"
          y1="77.8299942"
          x2="152.3450012"
          y2="77.8299942"
          gradientTransform="matrix(1 0 0 -1 0 154)"
        >
          <stop offset="0" stop-color="#FFFFFF" />
          <stop offset="0.14" stop-color="#C6C6C6" />
          <stop offset="0.15" stop-color="#CCCCCC" />
          <stop offset="0.19" stop-color="#E8E8E8" />
          <stop offset="0.22" stop-color="#F9F9F9" />
          <stop offset="0.25" stop-color="#FFFFFF" />
          <stop offset="0.27" stop-color="#E3E4E5" />
          <stop offset="0.3" stop-color="#BDBEC0" />
          <stop offset="0.33" stop-color="#9EA1A3" />
          <stop offset="0.36" stop-color="#888C8F" />
          <stop offset="0.39" stop-color="#7B7F82" />
          <stop offset="0.42" stop-color="#777B7E" />
          <stop offset="0.47" stop-color="#B6B8B9" />
          <stop offset="0.51" stop-color="#E4E5E5" />
          <stop offset="0.54" stop-color="#F6F6F6" />
          <stop offset="0.71" stop-color="#4C4B4A" />
          <stop offset="1" stop-color="#FFFFFF" />
        </linearGradient>
        <path
          fill="none"
          stroke="url(#SVGID_1_)"
          stroke-width="75.8099976"
          stroke-miterlimit="10"
          d="M40.2700005,37.9000015
        h70.6799927c1.927475,0,3.4899979,1.5625267,3.4899979,3.4900017v70.6800079c0,1.3089142-1.0610809,2.3700027-2.3699951,2.3700027
        c-0.0000076,0-0.0000076,0-0.0000076,0H40.2700005c-1.3089142,0-2.3699989-1.0610886-2.3699989-2.3700027l0,0V40.2700005
        C37.9000015,38.9610863,38.9610863,37.9000015,40.2700005,37.9000015z"
        />

        <radialGradient
          id="SVGID_2_"
          cx="76.1749954"
          cy="77.8250046"
          r="70.8649979"
          gradientTransform="matrix(1 0 0 -1 0 154)"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#EEEBE9" />
          <stop offset="0" stop-color="#F9F8F8" />
          <stop offset="0" stop-color="#FFFFFF" />
          <stop offset="0.15" stop-color="#F0F0F0" />
          <stop offset="0.42" stop-color="#C9C9C9" />
          <stop offset="0.52" stop-color="#BABABA" />
          <stop offset="0.6" stop-color="#B0B1B1" />
          <stop offset="0.73" stop-color="#969899" />
          <stop offset="0.89" stop-color="#6C7171" />
          <stop offset="1" stop-color="#4C5354" />
        </radialGradient>
        <path
          fill="url(#SVGID_2_)"
          d="M45,5.3099999h62.3499908c21.9201813,0,39.6900024,17.7698193,39.6900024,39.6899986v62.3499908
        c0,21.9201813-17.7698212,39.6900024-39.6900024,39.6900024H45c-21.9201813,0-39.6899986-17.7698212-39.6899986-39.6900024V45
        C5.3099999,23.0798187,23.0798187,5.3099999,45,5.3099999z"
        />
        <rect
          x="62"
          y="61.2799988"
          fill="#1D1D1B"
          width="28.3499985"
          height="9.0699997"
        />
        <rect
          x="62"
          y="75.2799988"
          fill="#1D1D1B"
          width="28.3499985"
          height="5.6699982"
        />
        <rect
          x="62"
          y="41.8899994"
          fill="#1D1D1B"
          width="28.3499985"
          height="14.4599991"
        />
        <polygon
          fill="#1D1D1B"
          points="76.1699982,18.6399994 98.8499985,41.8899994 53.4900017,41.8899994 		"
        />
        <path
          fill="#E30613"
          stroke="#1D1D1B"
          stroke-width="0.5"
          stroke-miterlimit="10"
          d="M49.7099991,112.5500031V98.1900024
        c-0.0762062-0.9865341,0.2159424-1.9663086,0.8199997-2.75c0.5527458-0.6110001,1.3465385-0.9475403,2.1699982-0.9199982
        c0.8428688-0.0385513,1.6594963,0.2983551,2.2299995,0.9199982c0.6076202,0.78228,0.9033737,1.7621841,0.8300018,2.75v14.6900024
        c-0.03825,1.4176102,0.1508141,2.8321915,0.5600014,4.1900024c0.3406601,1.0746384,1.0486984,1.9950867,2,2.5999985
        c1.2174835,0.6847992,2.6052895,1.0074692,4,0.9300003c2.3600006,0,4.0266724-0.6299973,5-1.8899994
        c1-1.25,1.4700012-3.1600037,1.4700012-5.7099991V98.1900024c-0.0815735-0.9886093,0.2071075-1.9722672,0.8099976-2.7600021
        c0.5544128-0.6135178,1.3539276-0.9472656,2.1800003-0.9100037c0.8341751-0.0337601,1.6414642,0.2986526,2.2099991,0.9100037
        c0.6279144,0.7763596,0.9323578,1.7649002,0.8499985,2.7600021v14.3600006
        c0.0433807,1.9719925-0.1854401,3.9405365-0.6800003,5.8499985c-0.4716644,1.5784836-1.3634491,2.9991074-2.5800018,4.1100006
        c-1.0851364,1.0045319-2.3795471,1.7558975-3.7900009,2.1999969c-1.6363373,0.4961243-3.3404083,0.7323303-5.0499992,0.6999969
        c-2.0026016,0.0393448-4.0002518-0.2133102-5.9300003-0.75c-3.105896-0.7844467-5.5412292-3.1929779-6.3600006-6.2900009
        C49.9223976,116.4761505,49.6731224,114.5156174,49.7099991,112.5500031z"
        />
        <path
          fill="#E30613"
          stroke="#1D1D1B"
          stroke-width="0.5"
          stroke-miterlimit="10"
          d="M93,113.2699966h-5.5800018v8.4499969
        c0.070816,0.9923706-0.236412,1.9747925-0.8600006,2.75c-1.1382446,1.2039795-3.0369873,1.2572708-4.2409744,0.1190262
        c-0.0407791-0.0385513-0.0804672-0.0782471-0.1190262-0.1190262c-0.6005096-0.7743912-0.8958588-1.7422714-0.8300018-2.7200012
        v-23c-0.1039429-1.0349731,0.2255096-2.0667725,0.9100037-2.8499985C83.1062775,95.2449036,84.1483002,94.9237366,85.1999969,95
        H93c1.7821808-0.0540085,3.5638123,0.1241531,5.3000031,0.5299988c1.169548,0.3121567,2.2510605,0.890564,3.1600037,1.6900024
        c0.8851624,0.7961884,1.5703278,1.7896805,2,2.9000015c0.4762039,1.2268066,0.7105179,2.5341721,0.6900024,3.8499985
        c0,3-0.9300003,5.3399963-2.8099976,6.9100037S96.6699982,113.2699966,93,113.2699966z M91.5299988,99.5699997h-4.1100006
        v9.1299973h4.0699997c1.2090759,0.0290146,2.4157181-0.1226578,3.5800018-0.4499969
        c0.8681717-0.2381363,1.6362686-0.7501984,2.1900024-1.4599991c0.5312805-0.785881,0.7943573-1.7224197,0.75-2.6699982
        c0.0482101-1.1835632-0.3680725-2.3390961-1.1600037-3.2200012C96,100,94.1900024,99.5699997,91.4899979,99.5699997H91.5299988z"
        />
      </g>
    </g>
  </svg>
);

function App() {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

  const updateWidthAndHeight = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  };

  useEffect(() => {
    window.addEventListener('resize', updateWidthAndHeight);
    return () => window.removeEventListener('resize', updateWidthAndHeight);
  });

  return (
    <div class="container">
      <div class="box box-1">
        <div class="test">{item}</div>
        <div class="test">{item}</div>
        <div class="test">{item}</div>
      </div>
      <div class="box box-2">
        <div class="test">{item}</div>
        <div class="test">{item}</div>
        <div class="test">{item}</div>
      </div>
    </div>
  );
}

export default App;