css - CSS：框列根据里面的内容自动增加高度

Question

前

后

该页面将有一个背景图像，中间有一个盒子，有两个分区，比例为 3:1（不同颜色）。我为此使用了引导网格/列/行。我现在的问题是，左侧栏可以有动态数量的字段，它不是固定的。如果它有 3-4 个字段，我很好。现在，如果字段增加，它会从框溢出（只有左侧列向下，绿色延伸到框外）。

如何确保如果有更多字段，框大小自动增加（我不想要垂直滚动条）？因此，如果有更多字段，我希望整个框的大小垂直增加，每列的背景颜色相同（绿色和黄色）。

<div>
    <form id="basic-layout">
       <div         
          >
          <div className="mt-5">
             <div id="reg-form">
                <div className="container" >
                <div className="row  ">
                   <div
                      id="form-header"
                      className="col-12  d-flex align-items-center"
                      >
                      <span> </span> <span>Heading</span>
                   </div>
                </div>
                <div className="row">
                   <div id="form-left-column" className="col-4">
                      // fields go here
                   </div>
                   <div id="form-right-column" className="col-8">
                      <div>                        
                         // fields go here                     
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
 </div>
 </form>
 </div>
 

CSS代码

#reg-form {
  background-color: #ffffff;
  box-sizing: border-box;
  width: 65vw;
  height: 85vh;
  margin: 0 auto;
}

#form-header {
  height: 14vh;
  background-color: #00447c;
}

#form-left-column {
  height: 76vh;
  background-color: green;
  overflow-y: auto;
}

#form-right-column {
  height: 76vh;
  background-color: yellow;
  overflow: auto;
}

Answer 1

不要在课堂上使用 id 练习。维护height:auto以便它可以根据孩子的身高进行管理。

   #form-left-column {
      height: auto;  //keep it auto
      background-color: green;
      overflow-y: auto;
    }