Css 如何在不随新数据增加的情况下使预扩展为列大小

我有一张卡（1），其中包含两张使用引导列的其他卡（2和3）。卡号2具有一些选择和其他元素，并根据屏幕改变其高度。卡号3有一个前置元素和一些按钮。我想做的是使两列的高度相同，每列包含一张卡片。pre元素将动态接收新数据，因此我希望它具有滚动条以保持数据可读性。 我可以通过指定卡的高度来实现这一点：

height: 10rem; overflow: auto; display: flex; flex-direction: column-reverse;

但是，我需要它相应地扩展到卡1的大小，如果我将高度设置为100%，它就会工作。因此，我希望它在高度设置为100%时显示，但在高度设置为特定值时工作。 可能吗

卡片
卡2
ABCDEFGHIJKL：
1.
2.
ABCDEFGHIJKL：
1.
2.
ABCDEFGHIJKL：
1.
2.
ABCDEFGHIJKL：
1.
2.
卡片3
1.
2.
发送
清楚的

我认为纯CSS是不可能的，我必须在jQuery中加入。。。我做了几件事：

• 分配id

  card2

  和

  card3

  &一个类

  ourClass

  ，使事情变得简单
• 将内联样式更改为

  overflow-y:scroll；显示器：flex；弯曲方向：柱反向

• 添加了一些jQuery以从

  #card2

  读取结果，并相应地设置

  #card3

下面的工作代码片段（请整页运行以查看效果）：

setInterval（函数（）{
$（'u#terminal_pre'）。追加（“123”）；
$（“#terminal_pre”）。追加（
；”；
}, 1000);
函数setRelevantHeight（）{
var newHeight=$（“#card2”）.height（）；
$（“#heightHere”）.text（$（“#card2”）.height（））；
$（“#card3”）.高度（新高度）；
var新调整高度=新高度-175；
//console.log（“newAdjustedHeight:”，newAdjustedHeight）；
$（“.ourClass”）.高度（新调整高度）；
}
$（文档）.ready（函数（）{
设置相关高度（）；
})
$（窗口）。调整大小（函数（）{
设置相关高度（）
});

卡片
卡2
ABCDEFGHIJKL：
1.
2.
ABCDEFGHIJKL：
1.
2.
ABCDEFGHIJKL：
1.
2.
ABCDEFGHIJKL：
1.
2.
卡片3
1.
2.
发送
清楚的
这是
遵循@Akber Iqbal的方法，我使其按预期工作。
我只是对它做了一些修改：


添加了在显示主卡时触发的事件调用，以在第一次正确设置卡的大小：

$（'#collapseOne'）.on（'show.bs.collapse'，function（）{
设置相关高度（）；
});

使用包含卡2主体内部元素的fiedset作为参考，以获取该卡的高度：

函数设置相关高度（）{
设newHeight=$（“#fieldsetcard2”）.height（）；
让温度=新高度+91；
$（“#card3”）.高度（温度）；
设newAdjustedHeight=newH
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="mt-1" id="comcard">

  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <i class="fas fa-exchange-alt"></i> CARD
      </button>
    </div>

    <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#comcard">
      <div class="card-body">
        <div class="row">
          <div id='card2' class="col-sm col-md-5 col-lg-4 col-xl-3">
            <div class="card h-100">
              <div class="card-header">
                CARD 2
              </div>
              <div class="card-body">

                 <fieldset id="fieldsetcard2">
                  <form>
                    <div class="form-group row">
                      <label for="Select1" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select1">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select2" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select2">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select3" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select3">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select4" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select4">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>
                </fieldset>

              </div>
            </div>
          </div>

          <div id='card3' class="col-sm col-md-7 col-lg-8 col-xl-9">
            <div class="card h-100">
              <div class="card-header"> CARD 3 </div>
              <div class="card-body d-flex flex-column">
                <div id="temp_id" class="card ourClass" style="overflow-y: scroll; display: flex; flex-direction: column-reverse;">
                  <div class="card-body " id="terminal_div">
                    <pre id="terminal_pre"></pre>
                  </div>
                </div>

                <fieldset id="group_io">
                  <div class="input-group mt-2">
                    <select class="custom-select col-sm-2" id="io_select">
                      <option value="0" selected>1</option>
                      <option value="1">2</option>
                    </select>
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                      <button class="btn btn-outline-success" type="button">Send</button>
                    </div>

                    <button type="button" class="btn btn-secondary ml-2">Clear</button>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

</div>