Wie zu stoppen Spalte Bildlauf in ionischen

Question

Ich arbeite an einem Bildschirm, auf dem es zwei Spalten, eine zur Auswahl der Kategorie und eine andere Spalte zur Anzeige von Elementen nach der Kategorie, im Grunde eine Filteroption Bildschirm. Ich habe zwei Spalten, Kategorie Spalte hat 3 Optionen Katze 1, Katze 2 und Katze 3, und die Liste in der anderen Spalte ist größer und kann Scroll-Funktion und verschiedene Liste für verschiedene Kategorien. Aber ich kann das nicht. Wenn ich auf diesem Bildschirm scrolle, scrollt der gesamte Bildschirm auch die Kategorie-Spalte. Ich möchte die Kategoriespalte vom Scrollen abhalten, und die Elementspalte kann scrollbar sein. wie es geht? mein Code unten ...

<ion-content> 

    <ion-row> 
    <ion-col > 

    <ion-item> 
     cat1 
    </ion-item> 
    <ion-item> 
     cat2 
    </ion-item> 
    <ion-item> 
     cat3 
    </ion-item> 
    </ion-col> 

    <ion-col class="home-container"> 

     <ion-list> 
      <ion-item padding text-wrap *ngFor="let d of data"> 
       <ion-label> 
        {{ d.title }} 
       </ion-label> 
       <ion-checkbox color="royal" checked="false"></ion-checkbox> 
      </ion-item> 
     </ion-list> 

    </ion-col> 
</ion-row> 

</ion-content> 

css

page-teacher-filter { 
    .home-container { 
     overflow:auto; 
     height: 100%; 
    } 
} 

Answer 1

Sie benötigen eine feste Höhe

section{ 
 
    background:red; 
 
    padding: 15px; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.cat_1, .cat_2{ 
 
    float: left; 
 
    padding: 20px; 
 
} 
 
.cat_1{background: silver;} 
 
.cat_2{ 
 
    background: white; 
 
    height: 300px; 
 
    overflow: auto; 
 
}

<section> 
 
    <div class="cat_1"> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    </div> 
 

 
    <div class="cat_2"> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    <div>item1</div> 
 
    <div>item2</div> 
 
    <div>item3</div> 
 
    </div> 
 
</section>