Intersting CSS Layout with Flexbox

layout.css

.app-container {
  display: flex;
  justify-content:center;
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items:center;
  background-color: gray;
  width: 70vw;
  height: 95vh;
}

.upper-section {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.left-side {
  display: flex;
  flex-direction: column;
  background-color: green;
  width: 66.6%
}

.left-top {
  display: flex;
  width: 100%;
  flex: 0.3 0.3 auto;
  height: 33.3%;
  background-color: green;
}

.left-top-breacrumb {
  display: flex;
  width: 100%;
  flex: 0.3 0.3 auto;
  height: 10%;
  background-color: cyan;
}

.left-mid {
  display: flex;
  width: 100%;
  flex: 0.3 0.3 auto;
  height: 33.3%;
  background-color: orange;
}

.lower-section {
  display: flex;
  width: 100%;
  height: 33.3%;
  flex: 0.3 0.3 auto;
}


.vertical-long {
  display: flex;
  width: 30%;
  flex: 0.3 0.3 auto;
  background-color: blue;
  height: 100%;
}

.mid-section {
  display: flex;
  background-color: orange;
}

.vertical-long {
  
}

.lower-section {
  background-color: purple;
}




.left-mid-left {
  display: flex;
  width: 33.3%;
  flex: 0.33 0.33 auto;
  height: 100%;
  background-color: yellow
}

.left-mid-mid {
  display: flex;
  width: 33.3%;
  flex: 0.33 0.33 auto;
  height: 100%;
  background-color: red;
}

.left-mid-right {
  display: flex;
  width: 33.3%;
  flex: 0.33 0.33 auto;
  height: 100%;
  background-color: pink
}

layout.html

<div class=app-container>
    <div class="main-content">
    <div class="upper-section">
      <div class=left-side>
        <div class="left-top-breacrumb">
          <div>a-</div>
        </div>
        
        <div class="left-top">
          <div>a+</div>
        </div>
      
        <div class="left-mid">
            <div class="left-mid-left">
              <div>c</div>
            </div>
            <div class="left-mid-mid">
              <div>d</div>
            </div>
          
            <div class="left-mid-right">
              <div>e</div>
            </div>
        </div>
        
        <div class="lower-section">
          <div>f</div>
        </div>
      </div>
      
      <div class="vertical-long">
        <div>g</div>
      </div>
    </div>
  </div>
</div>