Multiple ion-content-directives on one page not working as expected


#1

Hello everyone,
I want to place three individually scrollable containers (two ion-lists, one detail page) on one page. When searching for posts where similar issues have come up it’s usually recommended to use ion-scrolls. But they don’t work. The only approach that was kind of fruitful was to just wrap each of those containers with an ion-content but as soon as I add it to the third containers, all of the containers disappear.

<ion-content scroll="false">
	<ion-row>
		<ion-col col-4>
			<ion-scroll scrollY="true" style="height:100vh">
				<ion-list>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
				</ion-list>
			</ion-scroll>
		</ion-col>
		<ion-col col-4>
		<ion-content>
			<ion-scroll scrollY="true" style="height:100vh">
				<ion-list>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
					<ion-item>
						<div>
							Something
						</div>
					</ion-item>
				</ion-list>
			</ion-scroll>
		</ion-content>
		</ion-col>
		<ion-col col-4>
		<ion-content>
			<ion-scroll scrollY="true" style="height:100vh">
				<ion-card>
					<img src="../assets/imgs/Download.jpg"/>
				</ion-card>
			</ion-scroll>
		</ion-content>
		</ion-col>
	</ion-row>
</ion-content>

Does anybody know a solution to this problem?
I use the latest version of Ionic 3.

Best regards,
Moons