Bootstrap Div填充父高度

Question

我正在尝试创建一个具有2个 div s的容器，第一个需要保持其与其内部内容的高度，例如，文本和另一个无论是否有内容，都需要填充其父高度。

<div class="row">
    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-xs-3" id="column">
        <div id="column-name" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">TEXT</div>
        <div class="card-list col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " id="card-list-1">
            <!-- here are divs that fill this card-list up -->
        </div>
    </div>
</div>

#column是包含其他2个div s的div。我希望#column-name根据内容更改其高度（在这种情况下，只有内部的文本），但是我希望#card-list-1填充#column S高度的其余部分，尽管内部没有内容。#column通过页面中的其余列来调整自身的大小，因此根本不能处理高度。
我尝试使用flex，但由于某种原因，#column-name和#card-list-1都调整了相同的数量，这是父母的高度。
。
这是css：

#column{
    background-color: transparent;
    padding: 2px;
}
#column-name{
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    background-color: rgb(241, 241, 241);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    height: 18px;
}
.card-list{
    margin-bottom: 10px;
    border: 2px solid transparent;
    background-color: rgb(230, 230, 230);
    padding: 10px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 2px solid transparent;  
}

这实际上是具有4列的设计的一部分，并且div S在"卡片列表"的内部被拖放。
我真的更喜欢css或bootstrap解决方案，因此也可以在移动平台上使用。
谢谢。

编辑：如果我在#card-list-1上使用flex:1，我最终得到了此结果：
之前
在此处输入图像说明

也是一个问题的链接：https：//codepen.io/anon/pen/pen/gyrrvz

Answer 1

您需要使用flex和列方向。在这两个中，您都使用col-*-12，因此您希望它们是完整的宽度，并且可以使用列方向完成，以便您也可以选择这些类。然后只需将第二个flex:1制成，以便占据其余空间：

#column {
  background-color: transparent;
  padding: 2px;
  height: 300px; /*added a height to illustrate*/
  display: flex; /* new */
  flex-direction:column; /* new */
}
#column-name {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  background-color: rgb(241, 241, 241);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  height: 18px;
}
.card-list {
  flex: 1; /* new */
  margin-bottom: 10px;
  border: 2px solid transparent;
  background-color: rgb(230, 230, 230);
  padding: 10px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 2px solid transparent;
}

<div class="col-xs-3" id="column">
  <div id="column-name">TEXT</div>
  <div class="card-list" id="card-list-1">
    <!-- here are divs that fill this card-list up -->
  </div>
</div>