离子 - 离子排内容无法正确显示

Question

在Ionic项目的html文件中，我有一个ion-grid，有三行。第一个包含一个地图，第二个包含一个列表，第三个包含一个按钮。问题是第二行的内容没有显示在任何地方。

这是html代码：

 <ion-grid>
<ion-row>
<div class="map-container">
  <div id="map">
  </div>
</div> 
 </ion-row>

 <ion-row>
<ion-list>
  <p>
    Prova
  </p>
  <p>
      Prova
    </p>
    <p>
        Prova
      </p>
</ion-list>
</ion-row>

<ion-row>
<button ion-button color="primary" block (click)='planTrip()' id="button_plan"> Pianifica il tuo percorso </button>
</ion-row>
 </ion-grid>

这就是css：

#map{
width: 100%; 
height:92%; 
position: fixed;
}

#prova{
  position:fixed;
}

#button_plan{
  position: fixed;
  bottom: 0;
  width: 100%; 
  margin-bottom: 0px;
}