Flexbox问题：折叠下方元素时widget标题部分被隐藏如何解决？

问题原因 #

1. 你给.batchRunsContainer同时设置了flex-grow: 1和overflow: auto：flex-grow: 1会让这个容器始终和上方的.batchView平分父容器高度，就算内部内容隐藏后也不会收缩高度；而overflow: auto会在内容计算异常时裁切超出部分，导致标题显示不全。
2. flex列布局下子元素默认允许收缩，标题元素没有设置禁止收缩规则，容器高度异常时会被挤压，进一步导致显示不全。
3. 你只隐藏了内容区域，没有调整外层容器的拉伸属性，折叠后容器仍占用大量多余高度，也会影响布局表现。

解决方案 #

按以下步骤修改即可：

1. 移除.batchRunsContainer上的overflow: auto属性，滚动能力仅需要给内部内容区域.batchRuns设置就足够。
2. 给标题元素.batchRunsTitle添加flex-shrink: 0属性，强制标题不会被flex布局压缩，保证始终完整显示。
3. 修改点击事件逻辑，切换内容显示隐藏的同时，同步切换.batchRunsContainer的flex-grow属性：展开时设为1保持平分高度，折叠时设为0让容器仅自适应标题高度。

修改后的代码示例 #

JS代码

$('.batchRunsTitle').on('click', function() {
  const $container = $('.batchRunsContainer')
  $('.batchRuns').toggle()
  // 切换flex-grow属性，折叠时取消拉伸，高度自适应标题
  $container.css('flex-grow', $('.batchRuns').is(':visible') ? 1 : 0)
})

HTML相关样式修改

<!-- 仅列出调整的部分 -->
<div class="batchRunsContainer" style="flex-grow: 1; display: flex; flex-direction: column;">
  <!-- 给标题添加flex-shrink: 0禁止收缩 -->
  <div class="batchRunsTitle" style="cursor: pointer; background-color: #6c2; border: 10px solid #55F; flex-shrink: 0;">
    widget title 3
  </div>
  <div class="batchRuns" style="overflow: auto; display: block;">
    test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>
  </div>
</div>

内容的提问来源于stack exchange，提问作者stoefln