如何让一个div拉伸父级，而其他div只填充可用高度？

Question

我正在开发类似屏幕的仪表板。
屏幕有两行，顶部并不重要，但第二行才是问题。有两个高度可变的 div。

我希望左侧 div 填充可用空间，但不要溢出或扩展父级，如果其中有更多内容，右侧应该可以拉伸父级。还可能吗？

我的问题还有一个小技巧。我仍然需要能够打开和关闭它们（jquery

.slideToggle

），并且左侧 div 在大多数情况下内容很长，所以我需要滚动。

所以这里是工作演示或下面的代码片段
https://jsfiddle.net/1se0g3ct/3/

我尝试了什么？具有绝对位置和最小高度的解决方案，但是切换左侧面板很笨重，因为我想是因为最小高度。
https://jsfiddle.net/1se0g3ct/5/

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

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -7.5px;
  margin-left: -7.5px;
}

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

.header {
  background: gray;
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.body {
  background: #33333322;
  border-radius: 0 0 10px 10px;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.responsive_table {
  overflow-x: auto;
}

table {
  width: 100%;
}

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

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

Answer 1

要实现一个 div 拉伸父容器而另一个 div 仅填充可用高度的所需行为，您可以使用 CSS Flexbox。以下是构建布局的方法： 1.设置父div使用Flexbox。 2.将第一个div设置为拉伸（增长以填充可用空间）。 3.设置第二个div只占据它需要的高度，而不拉伸