JSFiddle - React, Tailwind, and code Playground

HTML

<div class=flexContainer>
  <div class=mainWindow>
    <div class=svgWrapper>
      <svg viewBox="0 0 100 100">
         <rect x="0" y="0" width="100" height="100" />
      </svg>
    </div>
  </div>
  <div class=mainMenu>
    Menu stuff here
  </div>
</div>

CSS

html, body {
  height: 100%;
}

.flexContainer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
}

.mainWindow {
    flex: 12;
}

.mainMenu {
  flex: 1;
  background-color: gray;
}

.svgWrapper {
  height: 100%;
  width: 100%;
  background-color: lightskyblue;
}

svg {
  width: 10%;
  height: 100%;
}