Div打破flexbox布局

Question

我有一个flex页面，它有一个按钮列表，这些按钮上方应显示文本。问题是，当我在此列表上方添加任何内容时，布局会中断。我认为我对css做错了。

这就是页面在列表上方没有任何内容的情况。 看起来不错！

这是此页面的.topics-component { display: flex; align-items: center; ion-content { scroll-content { display: flex; justify-content: center; ion-list { width: 300px; align-self: flex-end; button { height: 55px; margin-top: 10px; ion-label { color: color($colors, slate); } } } } } } ：

HTML

这里是<ion-navbar *navbar> </ion-navbar> <ion-searchbar placeholder="Search..." hideCancelButton="true"></ion-searchbar> <ion-content padding> <!--<div *ngIf="description"> <span>{{title}}</span> <span>{{description}}</span> </div>--> <ion-list no-lines> <button ion-item *ngFor="let topic of topics" (click)="selectTopic(topic)"> {{topic.title}} </button> </ion-list> </ion-content> ：

HTML

现在，当我在列表上方添加一些文本时，布局如何中断。

以下是<ion-content padding> <div *ngIf="description"> <span>{{title}}</span> <span>{{description}}</span> </div> <ion-list no-lines> <button ion-item *ngFor="let topic of topics" (click)="selectTopic(topic)"> {{topic.title}} </button> </ion-list> </ion-content> ：

flex-flow: column

这是破碎的布局：

我错过了什么？

更新

因此，在添加candleChart后，我得到了以下结果：

列表不再在底部了。