Css 三列：Vuetify中一列固定，两列反应

我需要在我的布局中最右边的列正好是600px（它在我的应用程序中是一个特殊的画布）。我希望其他两列拆分为剩余空间，如70-30左右。我曾使用Vuetify网格布局尝试实现这一点，但我认为网格布局不是我想要的

侧栏
主要内容
右上角
中右翼
机器人权利

---

谢谢

使用CSS Flexbox的简单方式：

body{margin:0}
.集装箱{
高度：100vh；
display:flex；/*在vuetify中，您有一个设置它的类：“d-flex”*/
}
.左{
宽度：30%；
背景色：红色；
}
.中{
宽度：70%；
背景颜色：绿色；
}
.对{
宽度：600px；
背景颜色：蓝色；
}

左边
中间的
赖特

使用vuetify网格系统可以实现

67%

/

33%

，因为此网格的单位为

1/12

。你能在paint/html中画出输出应该是什么样子吗？或者至少编辑帖子，告诉大家哪个是哪个？@ulou添加了一些澄清的图片！您是在项目中普遍使用vuetify，还是仅在本案例中安装了它？@ulou我在整个项目中都在使用它。然而，我认为vuetify 12pt网格更多的是用于改变移动设备、笔记本电脑和大型显示器的视图，而不是我在本页上需要的。我想我需要的只是一个flexbox布局，但我似乎无法让它工作。

 <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>