Three columns: one fixed, two reactive in Vuetify

Question

I need my right-most column in my layout to be exactly 600px (it is a special canvas thing in my application). I want the other two columns to split to remaining space like 70-30 or so. I have used Vuetify grid layout to try to achieve this but I think the grid layout is not what I want.

CodePen

 <v-row class="fill-height d-flex">
    <v-col class="black hidden-md-and-down col-2 overflow-auto docs flex-column pl-1 py-1 pr-0" style="max-height: calc(100vh - 80px);" >
      <div class="primary" style="background-color: green">
        Side bar
      </div>
    </v-col>
    <v-col style="background-color: blue" class="col-6 col-auto py-1 pa-1 pb-0 ma-0 flex-grow-1" style="max-height: 100%" >
      <div>
        Main Content
      </div>
    </v-col>
    <v-col class="fill-height col-lg-6 py-1 d-flex flex-column pr-0 pl-0" style="max-width: 600px" >
        <div style="background-color: purple">
        Top Right
      </div>
       <div>
        Mid Right
      </div>
        <div>
        Bot Right
      </div>
    </v-col>
  </v-row>

Thanks!

Answer 1

Simple way using CSS Flexbox:

body {margin: 0}

.container {
  height: 100vh;
  display: flex; /* In vuetify you have class that's sets it: "d-flex" */
}

.left {
  width: 30%;
  background-color: red;
}

.middle {
  width: 70%;
  background-color: green;
}

.right {
  width: 600px;
  background-color: blue;
}

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>