vuetifyでflex使った2カラム実装

この構造にして、<scroll-top>に justify-content: flex-end; 適用すると、サイドメニューの右端に簡単に持ってこれる。
float使う方法だと、scroll-topにちょっと細工しないといけないので使わない。
サイドメニュー幅は固定なのでグリットは使わない。

<template>
  <div class="p-container">
    <div class="p-main">
      <div>メイン</div>
    </div>
    <div class="p-side">
      <div>サイド</div>
    </div>
    <scroll-top></scroll-top>
  </div>
</template>

<style lang="scss" scoped>
$container-width: map-get($container-max-widths, 'md');
$side-width: 300px;
$side-margin: 40px;

.p-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  max-width: $container-width;

  .p-main {
    width: 100%;
  }

  .p-side {
    width: 100%;
  }
}

@media #{map-get($display-breakpoints, 'md-and-up')} {
  .p-container {
    flex-direction: initial;

    .p-main {
      width: calc(100% - #{$side-width + $side-margin});
    }

    .p-side {
      margin-left: $side-margin;
      width: $side-width;
    }
  }
}
</style>