在绝对定位父级中滚动Div

Question

我试图允许我的HTML中的内部div允许滚动。 我不确定是什么阻止了滚动。

这是我的HTML：

<div class ="item item-text-wrap" ng-class="{show: showingdata, more: moreinfo}">
            <div>
                <!-- Stuff I don't want to have scroll -->
            </div>
            <div class="scrollable">
                    <!-- Scrollable Stuff Here -->
            </div>
</div>

这是我的CSS：

.item.item-text-wrap{
    z-index: 10;
    position: absolute;
    bottom: 0px;
    width:101%;
    max-height: 25px;
    color:rgba(255, 255, 255, 1);
    background-color: rgba(50, 50, 50, 0.75);
    border: 0;
    overflow: hidden;
    -webkit-transition: max-height .1s;
    transition: max-height .1s;
}

.item.item-text-wrap.show{
    max-height: 180px;
    height: 500px;
}

.scrollable{
    height: 1000px;
    position: relative;
    margin-bottom: 20px !important;
    overflow-y: scroll;

}

注意：过去，我给类.item.item-text-wrap设置了一个高度值，尽管这再次没有奏效。

任何和所有帮助将不胜感激！

Answer 1

只需使用a，就不需要一堆复杂的CSS。 如果您不希望截断顶部，则将类“ has-header”添加到父div。 然后，您可以单击并拖动以滚动可滚动的内容

HTML：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <div class ="item item-text-wrap" ng-class="{show: showingdata, more: moreinfo}">
            <div>
                <h1>stuff</h1>
            </div>
            <ion-scroll>
                    <h1>Scrollable stuff</h1>
            </ion-scroll>
</div>
    </ion-pane>
  </body>
</html>

CSS：无

JS：

angular.module('app', ['ionic']);

参见游乐场： http : //play.ionic.io/app/f16c9cdc68bd

Answer 2

这里没有CSS专家，但是我认为诀窍在于父div的max-height和内部div的height 。

http://jsfiddle.net/60n26f25/