如何在Ionic中创建两个（或更多）列并使它们分别滚动？

Question

在我的Ionic应用程序中，我想创建2或3列布局，其中最左边的列将是某种父对象的列表，中间一列将列出子对象，第三列将用于详细信息。

从示例“tabs”项目开始，我决定看看在使用内置网格系统时它是如何工作的：

<ion-view view-title="Chats">
  <ion-content>
    <div class="row">
       <div class="col">
          <ion-list>
           <ion-item  ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
              <!-- stuff -->
           </ion-item>
          </ion-list>
        </div>
        <div class="col">
          <ion-list>
           <ion-item  ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
             <!-- stuff2 -->
            </ion-item>
          </ion-list>
        </div>
     </div>
  </ion-content>
</ion-view>

列确实在显示，但是，列表无法单独滚动，这是我希望能够做到的。我尝试了不同的东西，比如制作由“离子含量”组成的列，但是只有其中一个会显示，或者它们将被放在彼此的顶部。我的谷歌foo也没有产生任何结果，所以我将不胜感激任何帮助。

更新

将两个列表包装成“离子滚动”并排创建两个列表，并允许它们分别滚动，但现在列表只占宽度的50％，而屏幕的其余部分只是空的。到目前为止，没有任何CSS调整似乎有所帮助。

更新2：

使用时：      列将占据屏幕高度的100％。 然而，“感觉”并不完全正确，这让我觉得这可能不是最佳解决方案。有时（当靠近列表的顶部和底部时），一个列表也可以滚动其他列表，这非常烦人，所以我的求助请求仍然存在。