Scrolling div Layout mit Vuetify/Flexbox

Question

Sobald ich einen UI scharfkantigem Material (und damit Flexbox) ein, wie unten zu sehen:

Die beiden divs sind in einem übergeordneten Container. Was ich an dem Layout wirklich mag, ist, dass die Höhe des Containers (implizit über max-width und scaling) vom ersten div vorgegeben wird und dass das zweite div diese Höhe respektiert und einen scroll für jeden Überlauf erstellt.

Ich schreibe die App in VueJS und Vuetify um, und ich kann das alte Layout einfach nicht übersetzen. Ich habe versucht, das ursprüngliche CSS zurückzuentwickeln, aber die von Angular Material erzeugte Struktur erschwerte das.

Dies ist die nächste, die ich gekommen bin, aber der Scroll-Bereich überläuft noch außerhalb des Behälters:

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

entweder Vuetify oder sogar roh CSS verwenden, was ist die minimale Struktur dieses Layout zu erreichen, benötigt? Der Einfachheit halber ignorieren Sie Tabs, die Sie im Original sehen.

Answer 1

Here is the rough layout aus der original codepen Sie in Dissonanz gepostet.

Ich würde mir ansehen, was in der Angular-Material-App passiert (benutze devtools) und ob du etwas von diesem CSS in deine vuetify-App übertragen kannst.

Eine Sache zu beachten ist, dass Sie zwei Elemente mit der ID mapContainer hatten, die einige seltsame Überlaufprobleme verursachte, bis ich herausfand, was vor sich ging.

Inspiriert durch diese stackoverflow Antwort: https://stackoverflow.com/a/34194693/2074736