如何让一个div撑大父容器，另一个仅填充可用高度？

关键修改点： #

• 给.row添加align-items: flex-start，允许右侧面板根据内容自由撑开高度，同时让左侧面板能基于行的总高度自适应填充。
• 左侧的.parent设置height: 100%，确保它填满所在列的可用高度；.body添加overflow-y: auto，内容过多时自动显示垂直滚动条，同时保留flex: 1 1 auto来填充父容器剩余空间。
• 移除position: absolute相关设置，让元素保持在文档流内，确保jQuery的slideToggle能实现平滑的展开/收起动画。

修改后的完整代码： #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
  <div class="column">
    <div class="parent">
      <div class="header">toggle</div>
      <div class="body">
        <div class="responsive_table">
          <table>
            <tr>
              <td>First line</td>
            </tr>
            <tr>
              <td>Second line</td>
            </tr>
            <tr>
              <td>3rd line</td>
            </tr>
            <tr>
              <td>4th line</td>
            </tr>
            <tr>
              <td>5th line</td>
            </tr>
            <tr>
              <td>6th line</td>
            </tr>
            <tr>
              <td>7th line</td>
            </tr>
            <tr>
              <td>8th line</td>
            </tr>
            <tr>
              <td>9th line</td>
            </tr>
            <tr>
              <td>10th line</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="parent">
      <div class="header">toggle</div>
      <div class="body">
        <div>
          some text<br /> some text<br /> some text<br /> some text<br /> some text<br /> some text<br />
          some text<br /> some text<br /> some text<br /> some text<br /> some text<br /> some text<br />
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -7.5px;
  margin-left: -7.5px;
  align-items: flex-start; /* 关键：允许右侧面板自由撑开高度 */
}

.column {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  box-sizing: border-box;
}

.parent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%; /* 关键：左侧面板填满列的可用高度 */
}

.header {
  background: gray;
  border-radius: 10px 10px 0 0;
  text-align: center;
  padding: 8px 0; /* 给header固定内边距，确保高度稳定 */
}

.body {
  background: #33333322;
  border-radius: 0 0 10px 10px;
  flex: 1 1 auto;
  padding: 1.25rem;
  overflow-y: auto; /* 关键：内容过多时显示滚动条 */
  box-sizing: border-box;
}

.responsive_table {
  overflow-x: auto;
}

table {
  width: 100%;
}

table tr td {
  border-bottom: 1px solid black;
}

JavaScript

$(document).on("click", ".header", function() {
  let el = $(this).closest(".parent").find(".body");
  el.slideToggle();
})

效果说明： #

1. 右侧面板内容较多时，会自动撑开父容器的高度，左侧面板会填充这个高度，内容超出时显示滚动条，不会溢出。
2. 点击header时，slideToggle能实现平滑的展开/收起动画，不会出现生硬的跳转效果。
3. 左侧面板内容较少时，会自适应收缩，和右侧面板保持对齐。

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