は、Vuetify /フレキシボックス

Question

とDIVレイアウトをスクロール：

2つのdivは、親コンテナです。レイアウトについて本当に気に入っているのは、コンテナの高さが最初のdivで（暗黙的にmax-widthとscalingによって）指定され、2番目のdivがその高さを尊重し、オーバーフローのスクロールを作成するということです。

私はVueJSとVuetifyでアプリケーションを書き直しています。私は古いレイアウトを翻訳できません。元のCSSをリバースエンジニアリングしようとしましたが、Angular Materialによって作成された構造は難しいものでした。

これは私が来ている最も近いですが、スクロール領域がまだ容器の外に溢れ出る：

Vuetify、あるいは生のCSSのいずれかを使用して

<v-container fluid> 
     <v-layout v-bind="layout"> 
      <v-flex md8 sm12 id="mapContainer"> 
       <map-phase-viewer :game="game" :phases="phases"></map-phase-viewer> 
      </v-flex> 
      <v-flex fluid id="gameToolsContainer" class="elevation-1"> 
       <div style="overflow-y: scroll;"> 
        <v-list subheader v-if="game.Started" dense> 
         <div v-for="power in variant.Nations" :key="power + 'UnitSection'"> 
        <v-subheader class="nationSubheader">{{power}}</v-subheader> 
        <province-list-item 
         v-for="unit in getCurrentPhase().Units" 
         v-if="unit.Unit.Nation === power" 
         :key="unit.Province" 
         :unit="unit"> 
        </province-list-item> 
       </div> 
        </v-list> 
       </div> 
      </v-flex> 
     </v-layout> 
    </v-container> 

、このレイアウトを達成するために必要な最小構成は何ですか？簡単にするために、オリジナルのタブを無視してください。

Answer 1

Here is the rough layoutoriginal codepenから投稿しました。

Angular Materialアプリ（devtoolsを使用）で何が起こっているのかを見て、そのCSSの一部をvuetifyアプリに転送できるかどうかを確認してください。

注意すべきことは、ID番号mapContainerの2つの要素があり、何が起きているのか分かるまで奇妙なオーバーフローの問題が発生していたことです。

このスタックオーバーフローの解答に触発された：https://stackoverflow.com/a/34194693/2074736