Bootstrap Div füllen Elternhöhe

Question

Ich versuche, einen Container zu erstellen, der 2 div s hat, der erste muss seine Höhe in Bezug auf den Inhalt darin, zum Beispiel, Text, und der andere muss gefüllt halten seine Elternhöhe, egal ob Inhalt vorhanden ist oder nicht.

<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 ist die div, die die anderen 2 div s enthält. Ich möchte #column-name, um seine Höhe basierend auf dem Inhalt (in diesem Fall nur den Text im Inneren) ändern, aber ich möchte #card-list-1 den Rest der #column s Höhe füllen, Ereignis, obwohl es keinen Inhalt im Inneren gibt. #column ändert sich mit den restlichen Spalten auf der Seite, so dass die Höhe überhaupt nicht berücksichtigt werden muss.
Ich versuchte mit flex, aber aus irgendeinem Grund, die #column-name und #card-list-1 Größe beide die gleiche Größe, das ist doppelt so hoch wie die Eltern.
Dies ist der 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; 
} 

Dies ist eigentlich ein Teil eines Entwurfs ist, die vier Spalten und div s werden per Drag-and-sank innerhalb der ‚Kartenliste des.
Ich würde wirklich eine css oder bootstrap Lösung bevorzugen, so dass es auch auf mobilen Plattformen verwendet werden kann.
Danke.

EDIT: Wenn ich die flex:1 auf #card-list-1, ich mit diesem Ergebnis am Ende:
Vor before
Nach enter image description here

auch ein Link zu dem Code des Problems: https://codepen.io/anon/pen/GyrrvZ

Answer 1

Sie müssen Flex- und Spaltenrichtung verwenden. In beiden verwenden Sie col-*-12, also wollen Sie, dass sie volle Breite haben, und das wird mit der Spaltenrichtung gemacht, so dass Sie diese Klassen auch weglassen können. Dann einfach die zweite machen eine flex:1 so dauert es die restlichen Räume:

#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>