使用 flex-grow:1 在与 bootstrap 一起使用时将 div 推到 parent 容器外 collapse

Question

我正在使用 bootstrap 创建手风琴 3. 我想要的是手风琴的高度始终固定，无论其内容如何。如果元素的内容太大，则该元素内应出现垂直滚动条。此外，当用户单击元素的 header 时，该元素应占用包装器的其余高度（如果其余高度不够，则显示滚动条）。

当用户点击 panel-header 时，我更改 flex-grow:1。但是，当单击 "Collection 2" 时，滚动条没有像我预期的那样出现在 "Collection 2" 的 content-body 内，并且手风琴被推到包装器 div 之外。能否请你帮忙？如果可能的话，我更喜欢 css 唯一的解决方案。谢谢。

模板是：

 <body ng-app="accordion" ng-controller="ctrler as ctrl">
    <div id="wrapper" class="full-height wrapper">
       <div class="panel-border panel-group column-flex full-height" id="accordion">
         <div ng-repeat='key in [1,2,3]' class='panel panel-default'>
            <div class="list-group-item">
               <a class="panel-title" data-toggle="collapse" data-target="#{{key}}" data-parent="#accordion" ng-click='onClick($event)'>Collection {{key}}</a>
            </div>
            <div class="panel-collapse collapse content-body" id="{{key}}">
              <div class="panel-body">
                <ul class="list-unstyled">
                  <li ng-repeat="item in data1">
                    <div>{{item}}</div>
                  </li>
                </ul>
              </div>
            </div>
         </div>
       </div>
    </div>
 </body>

样式是：

  .column-flex{
    display : flex;
    flex-direction: column;
  }

 .wrapper {
   height: 500px;
   border-style: solid;
 }

添加flex-grow的代码是：

      if($(e.target).parents('.panel').css('flex-grow')==1){
            $element.find(".panel").css('flex-grow',0);
      }else{
            $element.find(".panel").css('flex-grow',0);
            $(e.target).parents('.panel').css('flex-grow',1);
      }

您可以在此处查看示例：https://plnkr.co/edit/iqrHG80GXj8teiRGeBU8?p=preview。

Answer 1

如果要在超过.wrapper的高度时出现滚动条，请将overflow: scroll;添加到.wrapper。但这将显示 .wrapper 的滚动条，而不是手风琴中的单个面板。如果您希望为手风琴中的单个面板显示滚动条，请将高度和 overflow: scroll; 应用到您希望滚动条出现的每个 .panel-collapse 位置。

Answer 2

将此添加到您的代码中：

.panel {
  display: flex;
  flex-direction: column;
}
.collapse.in {
  overflow-y: auto;
}

revised plunkr

使用 flex-grow:1 在与 bootstrap 一起使用时将 div 推到 parent 容器外 collapse

Using flex-grow:1 push the div outside of the parent container when using with bootstrap collapse

html

javascript

css

flexbox

twitter-bootstrap