使用 flex-grow:1 在与 bootstrap 一起使用时将 div 推送到父容器之外答案

【问题标题】：Using flex-grow:1 push the div outside of the parent container when using with bootstrap collapse使用 flex-grow:1 在与 bootstrap 一起使用时将 div 推送到父容器之外
【发布时间】：2017-05-26 23:45:29
【问题描述】：

我正在使用 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。

【问题讨论】：

标签： javascript html css twitter-bootstrap flexbox

【解决方案1】：

将此添加到您的代码中：

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

revised plunkr

【讨论】：

谢谢@Michael_B，它适用于 Chrome，但不适用于 Firefox 和 IE 11。你能帮忙吗？谢谢
尝试将min-height: 0 添加到.panel。 FF和IE11中的问题可能和这个有关：stackoverflow.com/q/36247140/3597276

【解决方案2】：

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

【讨论】：