使用flex-grow：1在使用bootstrap collapse時將div推到父容器外部

Question

我正在使用bootstrap創建一個手風琴3.我想要的是手風琴的高度始終是固定的，無論其內容如何。 如果元素的內容太大，則該元素內應出現垂直滾動條。 此外，當用戶單擊元素的標題時，該元素應該占據包裝器的其余高度（如果高度的其余部分不夠，則顯示滾動條）。

當用戶點擊面板標題時，我更改了flex-grow：1。 但是，當點擊“Collection 2”時，滾動條沒有像我預期的那樣出現在“Collection 2”的內容體內，手風琴被推到了包裝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;
}

修改過的plunkr

使用flex-grow：1在使用bootstrap collapse時將div推到父容器外部

問題描述

2 個解決方案

解決方案1
0 2017-01-12 01:11:39

解決方案2
0 已采納 2017-01-12 01:32:33

使用flex-grow：1在使用bootstrap collapse時將div推到父容器外部

問題描述

2 個解決方案

解決方案1 0 2017-01-12 01:11:39

解決方案2 0 已采納 2017-01-12 01:32:33

解決方案1
0 2017-01-12 01:11:39

解決方案2
0 已采納 2017-01-12 01:32:33