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

Question

I am creating an accordion using bootstrap 3. What I want is the accordion's height is always fixed no matter how its content is. If the content of an element is too large then a vertical scrollbar should appear inside that element. Also, when user click an element's header that element should take the rest of the height of the wrapper (and display scrollbar if the rest of height is not enough).

I change flex-grow:1 when user click on the panel-header. However, when clicking "Collection 2" the scrollbar didnt appear inside the content-body of "Collection 2" as I expected and the accordion is pushed outside of the wrapper div. Could you please help? I prefer a css only solution if possible. Thanks.

The template is:

 <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>

The styling is :

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

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

The code to add flex-grow is:

      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);
      }

You can check the example here : https://plnkr.co/edit/iqrHG80GXj8teiRGeBU8?p=preview.

score 1 · Accepted Answer · answered Jan 12 '17 at 01:32

1

Add this to your code:

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

revised plunkr

answered Jan 12 '17 at 01:32

Michael Benjamin

346,931
104
581
701

Thank you @Michael_B, it works well for Chrome but not Firefox and IE 11. Could you please help ? Thanks – Steven Jan 12 '17 at 15:51
Try adding `min-height: 0` to `.panel`. The problem in FF and IE11 may relate to this: http://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Jan 13 '17 at 03:24

score 0 · Answer 2 · answered Jan 12 '17 at 01:11

If you want a scrollbar to appear when the height of .wrapper is exceeded, add overflow: scroll; to .wrapper. But that will show a scrollbar for .wrapper, not individual panels in the accordion. If you want a scrollbar to appear for the individual panel in the accordion, apply a height and overflow: scroll; to each .panel-collapse where you want the scrollbar to appear.

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

2 Answers2